在 Vue 中，将 html 内容导出为 PDF

需要用到两个插件：html2canvas 和 jsPDF

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

import html2canvas from 'html2canvas';
import jsPDF from "jspdf";

// download()为下载按钮绑定的方法
download() {
   // 下面的"print"为需要导出内容的id(把想导出的html内容用div包起来，加上id="print"即可)
   html2canvas(document.getElementById("print")).then(function(canvas) {
   	 // 此时这个canvas即选中的需要转换的html的canvas形式
   	 // document.body.appendChild(canvas); // 这句的意思是把canvas内容再加在当前页面内容的后面
   	 
     var url = canvas.toDataURL();
     
     var contentWidth = canvas.width;
     var contentHeight = canvas.height;
     
     //一页pdf显示html页面生成的canvas高度;
     var pageHeight = (contentWidth / 592.28) * 841.89;
     
     //未生成pdf的html页面高度
     var leftHeight = contentHeight;
     
     //页面偏移
     var position = 0;
     
     //a4纸的尺寸[595.28,595.28]，html页面生成的canvas在pdf中图片的宽高
     var imgWidth = 595.28;
     var imgHeight = (592.28 / contentWidth) * contentHeight;

     var pdf = new jsPDF("", "pt", "a4");

     if (leftHeight < pageHeight) {
       pdf.addImage(url, "JPEG", 0, 0, imgWidth, imgHeight);
     } else {
       // 分页
       while (leftHeight > 0) {
         pdf.addImage(url, "JPEG", 0, position, imgWidth, imgHeight);
         leftHeight -= pageHeight;
         position -= 841.89;
         
         //避免添加空白页
         if (leftHeight > 0) {
           pdf.addPage();
         }
       }
     }
     
     pdf.save("xxx.pdf");
   });
 }

---

参考：

• html2canvas 将 HTML 内容写入 Canvas 生成图片
• 用 html2canvas 和 jspdf 实现将 html 转成 pdf 下载到本地