记录vue中使用html2canvas+jspdf实现页面生成pdf文件功能

---

一、前言

jspdf是一款开源插件，主要用于集成pdf文件；html2canvas是一个借助canvas将元素生成图片的一款插件。二者搭配使用可前端实现pdf文件的生成。

二、使用步骤

1.安装

代码如下：

npm install html2canvas
npm install jspdf

2.引入插件

代码如下：

// 新建pdf.js文件，导入插件
import html2canvas from "html2canvas"
import JSPDF from "jspdf"

3.根据自身业务编写所需代码

代码如下：

export default {
  install (Vue, options) {
    Vue.prototype.ExportSavePdf = function (html,htmlTitle, currentTime) {
      // var element = document.getElementById(html)
      // html2canvas(element, {
      //   logging: false
      // }).then(function (canvas) {
      //   var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
      //   var ctx = canvas.getContext("2d");
      //   var a4w = 190; var a4h = 297 // 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(htmlTitle + currentTime)
      // })
      
      // 解决生成文件时漏掉一些元素问题
      document.documentElement.scrollTop = 0
      var element = document.getElementById(html)
      console.log(element.clientWidth)
      var title = htmlTitle; //PDF文件标题
      
      var c = document.createElement("canvas");//创建照片
      
      var opts = {
        scale: 1,
        canvas: c,
        logging: true,
        width: element.clientWidth,
        height: element.clientHeight
      };
        //照片高度和宽度是页面元素的两倍
        c.width = element.clientWidth 
        c.height = element.clientHeight 
        c.getContext("2d").scale(1, 1);
        
        html2canvas(element, opts)
        .then(function(canvas) {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight = contentWidth / 1000 * 1600
          let leftHeight = contentHeight
          let position = 0
          let imgWidth = 1000
          let imgHeight = 1000 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JSPDF('', 'pt', 'a2')
          if (leftHeight < pageHeight) {
            //第一个20是img和pdf页面的左边距，第二个20是img与pdf页面的上边距
            PDF.addImage(pageData, 'JPEG', 100, 100, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 100, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 811.89
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(title + '.pdf')
        }) 
    }
  }
}

4.页面使用

代码如下：

<el-button
  type="primary"
  class="nor-icon_btn-base"
  @click="ExportSavePdf('pdfCentent1', 'xxxxxxxx')">
  下载pdf
</el-button>

5.解决html2canvas图片不清晰方法

var canvas = document.createElement("canvas"); 
var context = canvas.getContext("2d");
var scale = 4; 

canvas.width = 70 * scale;
canvas.height = 70 * scale;
        
canvas.getContext("2d").scale(scale, scale); 

var opts = {
    dpi: window.devicePixelRatio * 4,
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: 70, //dom 原始宽度
    height: 70,
    useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#capture"), opts).then(canvas => {
  document.body.appendChild(canvas);
});