生成pdf文件并打成压缩包下载 jsPDF JSZip

比十石开

于 2022-04-02 11:05:08 发布

阅读量1.6k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/byzzzzz/article/details/123915384

版权

这篇博客介绍了如何利用jsPDF和JSZip在前端生成PDF文件并将其打包到ZIP文件中供用户下载。通过设置字体、布局等细节，将文本内容写入PDF，然后转换为base64格式添加到ZIP文件中，最后生成ZIP文件并使用saveAs方法下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

前台在线生成多个pdf文件，并打成zip包下载

解决方案：

pdf文件使用jsPDF生成，压缩包用JSZip生成，但是前者生成的pdf怎么添加到后者的zip中研究了一段时间，最终方案如下：

import JSZip from "jszip";
import {jsPDF} from "jspdf";

···

downloadZip(){
     let zip = new JSZip();

     zip.file("Hello.txt", "Hello World\n");

     const doc = new jsPDF('p', 'pt'); // 获取实例
     // 设置中文字体
     doc.setFont('simfang');
     const pageWidth = doc.getPageWidth(); // A4纸:595.28
     const x1 = (pageWidth - doc.getTextWidth("Hello World")) / 2;
     doc.text(x1, doc.lastAutoTable.finalY+30 || 40, "Hello World"); // x坐标,y坐标,文字
     // 直接保存pdf文件
     // doc.save("Hello.pdf");

     // pdf添加到zip中
     var datauri = doc.output('dataurlstring');
     var base64 = datauri.substring(28);
     zip.file("Hello.pdf", base64, {base64: true});

     let content = zip.generate({type:"blob"})
     saveAs(content, "download.zip");

 }