vue+html2Canvas 保存pdf文件

1.说明

将HTML展示的页面保存为pdf文件

2.安装

npm install html2canvas
npm install jspdf

3.主函数

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
//title:下载的名称
pdf(title) {var element:any =document.bodysetTimeout(() => {html2Canvas(element).then(function(canvas) {var contentWidth = canvas.widthvar contentHeight = canvas.height//一页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 = 595.28var imgHeight = (592.28 / contentWidth) * contentHeightvar 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', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89//避免添加空白页if (leftHeight > 0) {pdf.addPage()}}}pdf.save(title + '.pdf')})}, 0)}