将自定义页面转换为PDF格式并导出

2021-1-18 20:43

351

47 字

2 分钟

一、通过html2Canvas和JsPDF实现

npm install html2canvas --save
npm install jspdf --save

在使用页引入

import html2Canvas from "html2canvas"
import JsPDF from "jspdf"

在事件中调用

html2Canvas(document.getElementById("pdf"))
.then(function(canvas){
      //原始的canvas高、宽
      let contentWidth = canvas.width;
      let contentHeight = canvas.height;
      //计算后的图片高度 为A4值的高度
      let imgWidth = 595.28;
      let imgHeight = 592.28/contentWidth*contentHeight;
      //转换图片的类型和质量1-0
      let pageData = canvas.toDataURL(['image/jpeg', 0]);
      //创建jsPDF实例
      let PDF = new JsPDF('', 'pt', 'a4');
      //添加图片地址，类型，等参数
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      //导出pdf并下载
      PDF.save( 'test'+'.pdf');
  });