【前端JS】生成 PDF并写入到文件夹，最后压缩下载

时间：2024-10-04 07:40:40

  • 背景： 因为后端的同学比较忙，没时间接这个需求，但是这个又急的用，哎呀，还是想到我们前端，所以我们前端还是牛plus。这个实现呢，我之前也只是听过，没有自己去做，今天我们一起探讨下这个一长串的需求

  • 拆封任务
    需要生成的PDF页面编写 --> 生成多个PDF 并写入到文件夹 -->压缩并下载

实现步骤

1、需要生成的PDF页面编写

在这里插入图片描述

上图页面左侧是操作区域 ，右侧是展示区域。在展示区域的跟标签加一个id标识（便于后期生成PDF）

2、生成多个PDF ，并写入到文件夹

在promise并发处理中可以异步处理多个PDF的生成，在每个执行完的回调函数里面做PDF写入处理

import JSZip from 'jszip';
import saveAs from 'jszip/vendor/FileSaver';

const zip = new JSZip();  //生产zip的压缩容器
const folder = zip.folder('invoice') // 填入对应文件夹
  • 1
  • 2
  • 3
  • 4
  • 5
// 这个在requestFn（callback）回掉里面执行
return new Promise((resolve) => {
  createPDF('pdfPage', da => {
    folder.file(elem.order_id + '.pdf', da);  //每次并发时就写入一个文件到文件夹
    resolve()
  })
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3、压缩并下载

zip.generateAsync({type: 'blob'}).then(blob=> {
  saveAs(blob, "");
})
  • 1
  • 2
  • 3

文章参考

  • jsPDF:/snr/cloud2/website/jsPDF-master/docs/
  • jszip: /jszip/

如果有任何不清晰的直接和我留言

相关文章