Vue框架中将当前页面内容生成PDF文件的方法及代码

在为客户做一个内网网站建设中，有部分内容要求可以生成PDF文件来下载查看，由于系统是使用的Vue，所以在参考了官方文档和网上教程后解决这个问题，将把解决方法和代码分享出来。

首先来看最终实现的效果：

接着我们来看具体代码内容：

1、引入所需插件命令

npm install html2canvas   

npm install jspdf

2、在utils中创建pdf.js文件

// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
  function htmlPdf(title, html) {
    html2Canvas(html, {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: window.devicePixelRatio * 1, 
      scale: 1 // 按比例增加分辨率
    }).then(canvas => {
      var pdf = new JsPDF('p', 'mm', 'a4'); // A4纸，纵向
      var ctx = canvas.getContext('2d');
      var a4w = 190; var a4h = 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
     var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
      var renderedHeight = 0;
      while (renderedHeight < canvas.height) {
       var 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');
    });
  }

export default htmlPdf;

3、html完整代码

<template>
  <div>
    <button @click="generate">点击按钮导出pdf</button>
    <div id="pdf-details" class="pdf-details">
      <h1>div里写需要生成的PDF内容的代码</h1>
      <table border="1" align="center" cellspacing="0" cellpadding="30">
        <tr class="pdf-details">
          <th style="width:80px">日期</th>
          <th style="width:100px">姓名</th>
          <th>地址</th>
        </tr>
        <tr v-for="(item,index) in tableData" :key="index" class="pdf-details">
          <td>{{item.date}}</td>
          <td>{{item.name}}</td>
          <td>{{item.address}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import htmlPdf from '@/utils/pdf.js';
export default {
  name: 'pdfGenerate',
  data () {
    return {
      tableData: [
        {date: '2016-05-02',name: '王大虎',address: '上海市普陀区金沙江路 111 弄'},
        {date: '2016-05-04',name: '王二虎',address: '上海市普陀区金沙江路 112 锤'}, 
        {date: '2016-05-01',name: '王三虎',address: '上海市普陀区金沙江路 113 子'},
        {date: '2016-05-03',name: '王四虎',address: '上海市普陀区金沙江路 114 呢'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 弄'}
      ]
    }
  },
  methods: {
    generate () {
      var TypeName = '生成的PDF';
      // 注意这一句
      htmlPdf(TypeName, document.querySelector('#pdf-details'));
    }
  }
}
</script>

好了，通过以上3部分代码就可以实现当前页面内容生成PDF文件，看完后喜欢的话记得收藏哦！