vue页面转pdf

1.

1.安装
//先把页面转为图片
npm install --save html2canvas
//然后图片转pdf
npm install jspdf --save

创建pdf.js
import html2canvas from "html2canvas";

import jsPDF from "jspdf";

export const downloadPDF = page => {
  html2canvas(page).then(function (canvas) {
    canvas2PDF(canvas);

  });

};

const canvas2PDF = canvas => {
  let contentWidth = canvas.width;

  let contentHeight = canvas.height;

  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

  let imgWidth = 595.28;

  let imgHeight = 592.28 / contentWidth * contentHeight;

  //let imgHeight = 700/contentWidth * contentHeight;

  //一页pdf显示html页面生成的canvas高度;

  var pageHeight = contentWidth / 592.28 * 841.89;

  let totalHeight = contentHeight;

  // 第一个参数： l：横向  p：纵向

  // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）

  let pdf = new jsPDF("p", "pt");

  let position = 0;

  //   pdf.addImage(

  //     canvas.toDataURL("image/jpeg", 1.0),

  //     "JPEG",

  //     0,

  //     0,

  //     imgWidth,

  //     imgHeight

  //   );

  if (totalHeight < pageHeight) {
    pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), 'JPEG', 0, 0, imgWidth, imgHeight);

  } else {

    while (totalHeight > 0) {
      pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), 'JPEG', 0, position, imgWidth, imgHeight)

      totalHeight -= pageHeight;

      position -= 841.89;

      //避免添加空白页

      if (totalHeight > 0) {
        pdf.addPage();

      }

    }

  }

  // pdf.addImage(

  //     canvas.toDataURL("image/jpeg", 1.0),

  //     "JPEG",

  //     0,

  //     position,

  //     imgWidth,

  //     imgHeight

  // );




  pdf.save("导出.pdf");

};

然后再要导出的页面使用

先引入
import { downloadPDF } from "@/utils/pdf.js";

然后写个按钮时间调用handleExport方法
<el-button @click="handleExport">导出</el-button>

<div class="index-home" ref="pdf"></div>

handleExport() {
    downloadPDF(this.$refs.pdf);
},
pdf就是要打印的元素中 ref的定义
然后浏览器会让下载个文件就完成了