在Vue项目中，一次性导出大量PDF文件容易导致浏览器崩溃。本文提供一种高效的替代方案：将多个PDF文件打包成ZIP压缩包下载，有效避免浏览器卡死。
核心技术在于利用JavaScript库jszip创建ZIP压缩包。jszip功能强大，能轻松创建、读取和操作ZIP文件，支持将多个文件添加到压缩包中，并以blob形式下载。
以下代码示例演示了如何结合jszip和file-saver库实现这一功能。 代码中使用示例文件index.html和main.ts代替实际的PDF文件，实际应用需根据项目情况调整。 假设你已获取PDF文件内容到变量中（例如，pdf1，pdf2等）。
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import pdf1 from './pdf/file1.pdf?raw'; // 替换为你的PDF文件路径
import pdf2 from './pdf/file2.pdf?raw'; // 替换为你的PDF文件路径
async function downloadZip() {
const zip = new JSZip();
zip.file('file1.pdf', pdf1);
zip.file('file2.pdf', pdf2); // 添加更多PDF文件
const blob = await zip.generateAsync({ type: 'blob' });
saveAs(blob, 'pdf_files.zip');
}
这段代码首先创建一个JSZip对象，然后将PDF文件内容添加到压缩包中。zip.generateAsync({ type: 'blob' })异步生成ZIP压缩包的blob对象，saveAs(blob, 'pdf_files.zip')将其保存为pdf_files.zip。 记得安装jszip和file-saver库：npm install jszip file-saver
立即学习“前端免费学习笔记（深入）”；
通过这种方法，你可以高效地打包多个PDF文件（或其他类型文件）为ZIP压缩包，显著提升用户体验，避免浏览器崩溃。 请根据实际情况修改文件路径和文件名。
