Vue项目将页面导出为pdf格式文件

1. 安装依赖

npm install html2canvas --save
npm install jspdf --save

2. 封装工具

在utils中新建文件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;
  let imgHeight = contentHeight;
  let imgWidth = contentWidth;
  let pdf = new jsPDF("l", "px", [contentWidth, contentHeight]);

  pdf.addImage(
    canvas.toDataURL("image/jpeg", 1.0),
    "JPEG",
    0,
    0,
    imgWidth,
    imgHeight
  );
  //导出文件的名字，可以自定义
  pdf.save("运行图.pdf");
};

new jspdf()参数说明
第一个参数 l：横向 p：纵向
第二个参数 测量单位（“pt”，“mm”, “cm”, “m”, “in” or “px”）
第三个参数 可选默认为“a4”，如果自定义指定大小这样 [100, 600]

3. 完整测试代码

<template>
   <div id="demo">
      <p> <el-button type="primary" @click="loadPdf">导出</el-button> </p>
      <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="date" label="日期" width="180">
         </el-table-column>
         <el-table-column prop="name" label="姓名" width="180">
         </el-table-column>
         <el-table-column prop="address" label="地址">
         </el-table-column>
      </el-table>

   </div>
</template>

<script>
import { downloadPDF } from '@/utils/pdf.js'
export default {
   data() {
      return {
         tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
         }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
         }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
         }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
         }]
      };
   },

   methods: {
      loadPdf() {
         downloadPDF(document.getElementById('demo'))
      }
   }
}
</script>
<style lang='css' scoped></style>

4.页面和最后的pdf

• 页面图片
  

• pdf