js实现pdf下载
使用原生JavaScript实现PDF下载
在JavaScript中实现PDF下载可以通过几种方式完成，包括直接下载服务器上的PDF文件、生成PDF内容后下载，或通过第三方库转换HTML为PDF后下载。以下是具体方法：
方法一：直接下载服务器上的PDF文件
创建一个隐藏的<a>标签，设置其href属性为PDF文件的URL，并触发点击事件：
function downloadPDF(url, filename) {
const a = document.createElement('a');
a.href = url;
a.download = filename || 'document.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// 使用示例
downloadPDF('https://example.com/document.pdf', 'myfile.pdf');方法二：使用Blob对象下载动态生成的PDF
如果PDF内容是通过代码生成的（如Base64数据），可以使用Blob对象：
function downloadPDFFromBase64(base64Data, filename) {
const byteCharacters = atob(base64Data.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename || 'document.pdf';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}使用jsPDF库生成并下载PDF
如果需要将HTML内容或动态数据转换为PDF，可以使用jsPDF库：
-
安装jsPDF：
npm install jspdf -
生成PDF并下载：
import { jsPDF } from 'jspdf';
function generateAndDownloadPDF() { const doc = new jsPDF(); doc.text('Hello World!', 10, 10); doc.save('generated.pdf'); }
### 使用PDFKit在Node.js环境中生成PDF
对于后端或Node.js环境，可以使用PDFKit：
1. 安装PDFKit：
```bash
npm install pdfkit- 生成PDF并发送到前端：
const PDFDocument = require('pdfkit'); const fs = require('fs');
function createPDF() { const doc = new PDFDocument(); doc.pipe(fs.createWriteStream('output.pdf')); doc.fontSize(25).text('Hello World', 100, 100); doc.end(); }
### 注意事项
- 跨域问题：直接下载服务器文件时需确保URL同源或配置CORS。
- 性能：大文件推荐使用分块下载或流式处理。
- 移动端兼容性：部分移动浏览器可能限制自动下载，需用户主动触发。
