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 Vue from "vue";
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页