vue项目中生成pdf并下载

1. 使用npm下载两个插件

// 1. 将html页面转成图片
npm install jspdf --save
// 2. 将图片生成pdf
npm install html2canvas --save

2. utils/下增加文件htmlToPdf.js

// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
/**
 * 用法：this.$getPdf("id","PDF名字");
 * @param {String} idStr 要打印的DOM区域 id
 * @param {String} title 导出的pdf文件名称
 */
const getPdf = function(idStr, title) {
  html2Canvas(document.querySelector("#" + idStr), {
    allowTaint: true
  }).then(function(canvas) {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    let pageHeight = (contentWidth / 592.28) * 841.89;
    let leftHeight = contentHeight;
    let position = 0;
    let imgWidth = 595.28;
    let imgHeight = (592.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL("image/jpeg", 1.0);
    let PDF = new JsPDF("", "pt", "a4");
    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.save(title + ".pdf");
  });
};

export default { getPdf };

3. 在main.js中使用定义的htmlToPdf.js文件：

import htmlToPdf from '@/utils/htmlToPdf.js'
Vue.prototype["$getPdf"] = htmlToPdf.getPdf;

4. 在页面中使用

 this.$getPdf("id","PDF名字");
 * @param {String} idStr 要打印的DOM区域 id
 * @param {String} title 导出的pdf文件名称