html前端使用js生成pdf文件并保存到本地

安装jspdf和html2canvas依赖，其中jspdf是文件保存操作，html2canvas是为了将内容转换为[canvas]图片

npm install jspdf  html2canvas --save

vue的首个class内容的pdf生成，这个主要写在main里面定义，这样在页面上就可以使用this.getPdf(文件名,"className")进行调用；文件名为不带 .pdf 的字符串，className为带标识的className，如 ；要生成的pdf文件名为：生成pdf.pdf,则调用为this.getPdf("生成pdf",".test")

import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
Vue.prototype.getPdf = function(title, domClass) {  
  let element = document.querySelector(domClass); // 这个dom元素是要导出pdf的div容器  
  html2Canvas(element).then(function(canvas) {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    let per = (contentWidth / 573.28)*0.75;//这个主要是为了防止宽度不够的
    //一页pdf显示html页面生成的canvas高度;
    let pageHeight = (contentWidth / 573.28) * 841.89;
    //未生成pdf的html页面高度
    let leftHeight = contentHeight;
    //页面偏移
    let position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 573.28;
    let imgHeight = (573.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL("image/jpeg", 1.0);
    // console.log(pageData,"pageData");
    //        let pdf = new JsPDF('', 'pt', 'a4');
    let pdf = new JsPDF("", "pt", [595.28,841.89]); //不分页    // pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 11, 70, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight;
        position -= 841.89;
        //避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // console.log(pdf,"pdf",title);
    pdf.save(title + ".pdf");
  });
};