vue 导出PDF格式

1、npm安装两个模块

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2、定义函数，在指定页面引入

```javascript
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
    //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="downloadPDF">导出PDF</button>
export default{
 data(){
        title:"页面导出PDF文件名"
 },
 downloadPDF() {
      let that = this;
      let element = document.getElementById("pdfDom");
      html2canvas(element, {
        logging: false,
        useCORS: true,
      }).then(function (canvas) {
        let pdf = new jsPDF("p", "mm", "a4"); //A4纸，纵向
        let ctx = canvas.getContext("2d"),
          a4w = 190,
          a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
          imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
          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(); //如果后面还有内容，添加一个空页
        }
        pdf.save(that.title);
      });
    },```
}