vue.js+jspdf.js+html2pdf.js 实现页面导出PDF

vue.js+jspdf.js+html2pdf.js 实现页面导出PDF

原本是导出word但客户考虑到问到的安全性要求改成了PDF，由于之前的word导出也是有前端生成的，所以为了不增加工作量导出依旧有前端完成。起初在网上找了很多方法都无法实现，都想放弃了让后端写，后来看到了关于jspdf.js+html2canvas.js的文章，想着试试看吧。对于前端导出PDF我就是个小白，啥也不会。按着文章一步步写吧。

安装插件html2canvas和jspdf

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

在项目中引入

新建htmlToPdf.js

我直接在自己新建的common文件夹中新建了htmlToPdf.js
scale 这个属性还是需要设置一下的，一开始没有设置导致导出的PDF很模糊。
htmlToPdf.js 代码根据自己实现有稍作修改

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */

function downloadPDF(ele, pdfName){
   
   

  let el=document.getElementById(ele)  //通过getElementById获取要导出的内容
  let eleW = el.offsetWidth;// 获得该容器的宽
  let eleH = el.offsetHeight;// 获得该容器的高

  let eleOffsetTop = el.offsetTop;  // 获得该容器到文档顶部的距离
  let eleOffsetLeft = el.offsetLeft; // 获得该容器到文档最左的距离
  var canvas = document.createElement("canvas");
  var abs = 0;
  let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
  let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

  if(win_out>win_in){
   
   
    abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
  }
  canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
  canvas.height = eleH * 2;

  var context = canvas.getContext("2d");
  context.scale(2, 2);
  context.translate(-eleOffsetLeft -abs, -eleOffsetTop);

  html2canvas( el, {
   
   
    dpi: 96,     //分辨率
    scale: