VUE页面导出为PDF文件

依赖插件

使用npm下载两个插件

//第一个：将页面html转换成图片
npm install --save html2canvas

//第二个:将图片生成pdf
npm install jspdf --save

引用插件

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

导出pdf文件

exportPdf(){
      this.$refs.bottomBtn.style.display = 'none'
      const page = this.$refs.pdfPage;
      let that = this
      html2canvas(page,{scale:1.1}).then(function(canvas) {
        that.canvas2PDF(canvas)
      });
    },

封装图片转pdf函数

canvas2PDF(canvas){
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      let pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      let leftHeight = contentHeight;
      //页面偏移
      let position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      let imgWidth = 595.28;
      let imgHeight = (592.28 / contentWidth) * contentHeight;
      let pageData = canvas.toDataURL("image/JPEG");
      const PDF = new jsPDF("", "pt", "a4");
      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          //避免添加空白页
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      // PDF.oupput 文件转base64格式
      var pdfData = PDF.output('datauristring')
      console.log('kxj_PDF:',pdfData)
      // 下载pdf文件到本地
      PDF.save("告知事项.pdf");
      this.$refs.bottomBtn.style.display = 'block'
    },