vue项目导出页面指定dom为pdf

1.安装html2canvas
npm install --save html2canvas
2.安装pdfjs
npm install --save pdfjs
3.新建一个js文件，比如叫 pdf.js
代码如下：

// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

//新建导出pdf方法；传递参数：title：pdf标题，id指定dom的id，如果是导出整个页面，就在页面外层的元素加个id
export function getPdf(title, id) {
  html2Canvas(document.querySelector(`#${id}`), {
    allowTaint: true,
    useCORS: true,
  }).then(function (canvas) {
    let pdf = new JsPDF("p", "mm", "a4"); // A4纸，纵向
    let ctx = canvas.getContext("2d");
    ctx.mozImageSmoothingEnabled = false; // 关闭抗锯齿
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    let a4w = 190;
    let a4h = 257; // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
    let imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
    let renderedHeight = 0;

    while (renderedHeight < canvas.height) {
      let 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(title + ".pdf");
  });
}

4.在页面里调用方法：

<template>
	<div>
	<div>
	//导出按钮
		<button @click="exportPdf()"></button>
	<div/>
	//需要导出的dom
	<div id="pdf"><div/>
	</div>
</template>


....

<script>
//引入上一步写好的js文件
import {getPdf} from "./pdf.js"
....
exportPdf(){
	//参数：pdf标题，导出dom的id
	getPdf("我是导出来的pdf", "pdf");
}
</script>