JS - 导出一个或多个pdf 生成zip压缩包

前端生成和导出pdf zip；

使用的插件：jspdf、html2canva、jszip、file-saver

插件安装：npm install jspdf html2canvas jszip file-saver

可用于单个导出pdf ，或者多个直接生成压缩包

ps:这里演示代码使用场景是：zip文件里多个pdf （自行修改）

pdf.js

//PDF.js
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
/*** 网页转pdf* @param {*} dom 指定区域* @param {*} name 文件名*/
export const downloadPDF = (dom, name) => {return new Promise((resolve, reject) => {setTimeout(() => {var _downDOM = dom// 导出之前先将滚动条置顶,不然会出现数据不全的现象window.pageYOffset = 0document.documentElement.scrollTop = 0document.body.scrollTop = 0html2canvas(_downDOM, {scale: 4, //按比例增加分辨率 (2=双倍).dpi: window.devicePixelRatio * 4, //设备像素比}).then((canvas) => {var contentWidth = canvas.widthvar contentHeight = canvas.height// console.log(contentWidth + '||' + contentHeight)//一页pdf显示html页面生成的canvas高度;var pageHeight = (contentWidth / 592.28) * 841.89//未生成pdf的html页面高度var leftHeight = contentHeight//页面偏移var position = 0//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高var imgWidth = 555.28var imgHeight = (555.28 / contentWidth) * contentHeightvar pageData = new Image()//设置图片跨域访问pageData.setAttribute('crossOrigin', 'Anonymous')pageData = canvas.toDataURL('image/jpeg', 1.0)var pdf = new jsPDF('', 'pt', 'a4')//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {pdf.addImage(pageData, 'JPEG', 20, 80, imgWidth, imgHeight)} else {while (leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89//避免添加空白页if (leftHeight > 0) {pdf.addPage()}}}//这里返回文件 用来处理多个下载 打包zipresolve({ PDF: pdf, name: name })//直接单个pdf可直接调用下面方法// pdf.save(name)})}, 10)})
}

template中使用


import JSZip from 'jszip'
import FileSaver from 'file-saver'
import { downloadPDF } from '@/utils/pdf' //引入封装的pdf.js文件/*** 触发下载*/async download() {let promises = []//downloadTaskList 为下载的长度，我这里是为发票数组for (let i = 0; i < this.downloadTaskList.length; i++) {//dom 具体传入参数 自行修改let PDFres = await downloadPDF(this.$refs[`pdf${this.downloadTaskList[i].code}`][0], `${this.downloadTaskList[i].realName}-${this.downloadTaskList[i].code}`)promises.push(PDFres)const loading = this.$loading({lock: true,text: 'loading...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})//动态提示需要等待生成文件loading.setText(`正在生成第${i + 1}/${this.downloadTaskList.length}份回执单`)if (i === this.downloadTaskList.length - 1) {this.zipChange(promises)loading.close()}}
},
/***生成zip*/
zipChange(promises) {Promise.all(promises).then(async(pdfs) = >{const zip = new JSZip() promises.forEach(async(item, index) = >{const {PDF,name} = itemif (promises.length === 1) {PDF.save(`$ {name}.pdf`)} else {await zip.file(`$ {name}.pdf`, PDF.output('blob'))}}) if (promises.length > 1) {zip.generateAsync({type: 'blob'}).then((content) = >{FileSaver.saveAs(content, '回执' + '.zip')})}})
},

JS - 导出一个或多个pdf 生成zip压缩包相关推荐

python web项目导出zip文件_通过javascript在网页端生成zip压缩包并下载
zip.js是什么通过zip.js封装一个能在网页端生成zip文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载: 如何使用: 1:引用zip.js 2:引用jQuery ...
通过javascript在网页端生成zip压缩包并下载
通过javascript在网页端生成zip压缩包并下载原文:通过javascript在网页端生成zip压缩包并下载 zip.js是什么 zip.js的github项目地址:http://gildas ...
干撸一个Node环境的PDF生成服务
干撸一个Node环境的PDF生成服务用到的库介绍代码片段 Http请求处理生成PDF 样式展示签名图片处理 PDF排版结语用到的库 express:Express 是一个保持最小规模的灵 ...
一个能够自动给pdf生成目录的东西
我需要一个能够给pdf生成目录的工具.就类似iReader做到的那样. 首先:pdf是非扫描版的->扫描的页面范围,标记. pdf 是扫描版的-->如何识别出扫描的字体.
【zip导出】下载导出包含图片,excel,pdf的zip压缩包
工具类 package com.sapit.compensation.moudle;import java.awt.Color; import java.awt.Rectangle; import j ...
使用docxtemplater模板语法，导出多个word文件，并生成zip压缩包
文章目录前言: 一.插件准备: 二.创建一个 download-zip.ts 文件,内容为: 三.页面使用: 四.word模板: 五.结果如下: 六.基本语法: 前言: 1.前端使用的是vue.el ...
JavaWeb项目文件夹生成Zip压缩包并下载到本地
1.FileToZip接口类 /** * */ package com.sale.util; import java.io.BufferedInputStream; import java.i ...
PHP生成zip压缩包
压缩一个文件我们将一个文件生成一个压缩包. <?php $path = "c:/wamp/www/log.txt"; $filename = "test.zip& ...
java批量下载生成zip压缩包
设计思路: 1.本地先创建一个zip文件 2.将批量下载的文件依次放入zip文件中 3.将zip文件返回给前端 //一.本地先生成zip文件//要批量下载的文件id数组 String[] ids = ...

JS - 导出一个或多个pdf 生成zip压缩包

JS - 导出一个或多个pdf 生成zip压缩包相关推荐

最新文章

热门文章