vue实现pdf下载
Vue 中实现 PDF 下载的方法
使用 pdf-lib 生成并下载 PDF
安装 pdf-lib 库：
npm install pdf-lib示例代码：
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
async function generatePDF() {
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage();
const { width, height } = page.getSize();
const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
page.drawText('Hello World!', {
x: 50,
y: height - 50,
size: 30,
font,
color: rgb(0, 0, 0),
});
const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'example.pdf';
link.click();
}使用 html2pdf.js 将 HTML 转换为 PDF
安装 html2pdf.js：
npm install html2pdf.js示例代码：
import html2pdf from 'html2pdf.js';
function downloadPDF() {
const element = document.getElementById('content-to-export');
const opt = {
margin: 10,
filename: 'export.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf().from(element).set(opt).save();
}直接下载服务器上的 PDF 文件
使用 axios 或 fetch 下载服务器上的 PDF：
function downloadPDFFromServer() {
const link = document.createElement('a');
link.href = '/path/to/file.pdf';
link.download = 'document.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}使用 jsPDF 生成简单 PDF
安装 jspdf：
npm install jspdf示例代码：
import jsPDF from 'jspdf';
function generateSimplePDF() {
const doc = new jsPDF();
doc.text('Hello World!', 10, 10);
doc.save('simple.pdf');
}注意事项
- 浏览器兼容性：某些 PDF 生成库可能不支持旧版浏览器。
- 文件大小：生成的 PDF 文件过大可能影响性能。
- 权限问题：确保下载操作由用户交互触发，避免被浏览器拦截。
- 样式保留：使用 HTML 转 PDF 时，复杂样式可能需要额外配置。
