js如何下载pdf文件怎么打开方式

在JavaScript中下载和打开PDF文件的方法包括：使用标签和Blob对象、使用FileSaver.js库、使用PDF.js库。以下是详细的实现方式和解释：

一、使用 标签和Blob对象

通过使用原生的标签和Blob对象，我们可以创建一个下载链接来下载和打开PDF文件。这种方式最为简单和直接。

1. 创建Blob对象

首先，我们需要创建一个Blob对象，其中包含PDF文件的数据：

const pdfData = new Uint8Array([...]); // 将PDF文件的数据放在这里
const blob = new Blob([pdfData], { type: 'application/pdf' });

2. 创建下载链接

然后，我们创建一个标签并设置其href属性为Blob对象的URL：

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'filename.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

二、使用FileSaver.js库

FileSaver.js是一个专门用于在客户端保存文件的库，支持所有现代浏览器。使用这个库可以简化文件下载过程。

1. 引入FileSaver.js

首先，需要在项目中引入FileSaver.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

2. 使用FileSaver.js保存PDF文件

在JavaScript代码中，通过FileSaver.js保存PDF文件：

const pdfData = new Uint8Array([...]); // 将PDF文件的数据放在这里
const blob = new Blob([pdfData], { type: 'application/pdf' });
saveAs(blob, 'filename.pdf');

三、使用PDF.js库

PDF.js是一个用于在网页上显示PDF文件的库，由Mozilla开发。它不仅可以下载PDF，还可以在网页中直接显示PDF内容。

1. 引入PDF.js

首先，需要在项目中引入PDF.js库：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

2. 使用PDF.js显示PDF文件

在JavaScript代码中，通过PDF.js显示PDF文件：

const pdfData = new Uint8Array([...]); // 将PDF文件的数据放在这里
const loadingTask = pdfjsLib.getDocument({ data: pdfData });
loadingTask.promise.then(function(pdf) {
    console.log('PDF loaded');
    // 获取第一页
    pdf.getPage(1).then(function(page) {
        console.log('Page loaded');
        const scale = 1.5;
        const viewport = page.getViewport({ scale: scale });
        // 准备canvas
        const canvas = document.getElementById('the-canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        // 渲染PDF页面到canvas
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(function() {
            console.log('Page rendered');
        });
    });
}, function(reason) {
    console.error(reason);
});

小结

上述三种方法各有优劣：使用标签和Blob对象的方法简单直接，适用于下载文件；FileSaver.js库提供了更简洁的API，适合更多浏览器兼容性需求；而PDF.js不仅可以下载PDF文件，还可以在网页中直接显示PDF内容，适用于更复杂的应用场景。根据具体需求选择合适的方法可以有效提升用户体验。