vue通过插件实现PDF生成以及下载

第一步: 安装插件

npm install --save html2canvas  //将html转换成图片
npm install jspdf --save　//将图片生成pdf

第二步: 在需要的地方引入插件

import html2Canvas from "html2canvas";
import JSPDF from "jspdf";

第三步: 使用插件生成PDF

HTML代码代码

<div id="pdfWrap">
      //这是你要绑定的盒子,里面是你需要打印的内容
<div>

JS部分代码

printOut() {

      let pdfDom = document.querySelector("#pdfWrap"); //这里绑定你要转换的页面
      
      console.log(pdfDom.offsetHeight)
      pdfDom.style.background = "#FFFFFF";
      let _this = this;
      let pdfPage = null;
      html2Canvas(pdfDom,{
                  //开始截图,这里可以设置一些截图时的属性
               logging: false,
               //height:3000,
      }).then((canvas)=>{
            // 开始将图片转换为PDF
            var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
            var ctx = canvas.getContext("2d")
            console.log(canvas.height)
            var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
            var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
            var renderedHeight = 0

            while (renderedHeight < canvas.height) {
                var page = document.createElement("canvas")
                page.width = canvas.width
                page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
        
                // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
                pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
        
                renderedHeight += imgHeight
                if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页
                // delete page;
            }
            pdf.save('123.pdf')

      })
    },

如果HTML页面比较长,一定要注意你绑定的dom是不是能够完全显示,有没有被overflow影响,导致高度不够,页面不能完全被截取.