项目需求：根据HTML页面导出完整的PDF

技术栈： html2canvas 、 jspdf 、 Vue

首先将包下载到项目中，然后在制定页面引入依赖包

import html2Canvas from "html2canvas";

import JsPDF from "jspdf";

定义一个ID为pdfDom的HTML节点，也就是你想导出的那部分

<div class="right" id="pdfDom">这是PDF的内容<div>
<img src="" alt="" v-show="false" id="waterMarkImg">      //  图片水印的dom元素

首先页面会被转化为canvas，然后生成图片后导出PDF文件，那生成canvas的时候会出现不清晰的问题，那就将canvas的画布增大两倍，然后在转成PDF的时候再缩小，清晰度就会变高。

接下来在导出按钮上绑定事件，在点击事件里粘贴如下代码

let title = this.articleInfo.title;       // 设置导出PDF的文件名

var element = document.getElementById("pdfDom");      // 获取需要导出的DOM节点

var shareContent = element; //需要截图的包裹的（原生的）DOM 对象

var width = shareContent.offsetWidth; //获取dom 宽度

var height = shareContent.offsetHeight; //获取dom 高度

var canvas = document.createElement("canvas"); //创建一个canvas节点

var scale = 2; //定义任意放大倍数 支持小数

canvas.width = width * scale;

canvas.height = height * scale;

canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

var opts = {

       scale: scale, // 添加的scale 参数

       canvas, //自定义 canvas

       logging: true, //日志开关，便于查看html2canvas的内部执行流程

       width: width, //dom 原始宽度

       height: height,

       useCORS: true // 【重要】开启跨域配置

};

//     以上部分都是为了强化清晰度的，放大canvas画布

html2Canvas(shareContent, opts).then(function(canvas) {
  //  获取水印元素 
  var img = document.getElementById('waterMarkImg');
  
  var pdf = new JsPDF("p", "mm", "a4"); //A4纸，纵向

  var ctx = canvas.getContext("2d"),

  a4w = 190,

  a4h = 277,      //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277

  imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度

  renderedHeight = 0;

  // 【重要】关闭抗锯齿   这部分也是为了强化清晰度

  ctx.mozImageSmoothingEnabled = false;

  ctx.webkitImageSmoothingEnabled = false;

  ctx.msImageSmoothingEnabled = false;

  ctx.imageSmoothingEnabled = false;

  while (renderedHeight < canvas.height) {

     var page = document.createElement("canvas");
     // 生成canvas上下文
     let pageCtx = page.getContext("2d");  

     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);
     
     // 在画布上画图
     pageCtx.drawImage(img, 280,1400,2000,800); 
    
	 --------------------------------------   华丽的分割线--这里很重要，是个重要的提醒   -----------------------
	 在本地测试的时候是没有问题的，但是如果上线打包后水印的图片会替换成线上的地址，那么问题来了，canvas会有一个图片跨域的问题。。。。。。下面有解决办法
	
     //添加图像到页面，保留10mm边距，保留边距就不会出现文件内容在中间被分割的问题

     pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG",10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width)); 

     renderedHeight += imgHeight;

     if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容，添加一个空页
  }

  PDF.save(title + ".pdf");

});

两个坑

一、还有一个很大的问题就是 jspdf 他是不会自己换页的，所以他可能会把字从中间截断了

二、上面提到的canvas图片跨域的问题，解决方法有三种

let url = 'https://www.tupian.png?'+new Data()..getTime();