项目需求：根据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 他是不会自己换页的，所以他可能会把字从中间截断了
酱紫了，很丑不说吧还影响使用啊，那我给土工两条思路
1、如果内容是固定的，那么你就可以计算好每一页的高度了，A4纸的高度大概是840px，那你就在差不多的高度的时候留出空白，那就不会存在截断的问题
2、如果内容高度是后台返回前端循环出来的，那么内容是不固定的，高度也是不固定的，所以又有两种方式解决
- 1、找到需要打印的
var element = document.getElementById("pdfDom");然后取到他的childrenNodes去循环判断每一个元素距离顶部body的高度是不是整数比，如果正好是整数的时候也就是到了换页的地方，那就直接在这里换页，剩下的换到下一页 - 如果页面的总高度是840，那么到换页的地方是20的倍数，那么把每一行的行高或者说是高度都设置成20的整数倍，那么在换页的时候会是正好的元素的高度结束的位置。
二、上面提到的canvas图片跨域的问题，解决方法有三种
1、img.setAttribute("crossOrigin",'anonymous'); 设置允许图片跨域的属性
原理：因为canvas禁止访问外链接图片所以才会引起跨域，那就在图片上设置允许跨域的属性告诉canvas，我就是允许跨域，剩下的你别管，但是这个需要后台跟着一起配置cors跨域的access
2、一个神奇的方法，就是在图片的URL后面加个时间戳
let url = 'https://www.tupian.png?'+new Data()..getTime();
3、第三种方法就是百度搜索在线转换base64，然后把你的线上图片直接转成base64的格式然后 js 设置到 img 的 src 上就OK了，最简单也是最low的方法
嘻嘻嘻，我就用的第三种（小声bb）
因为我转成PDF的时候用第一种不生效，直接就没有图片了我也不知道为啥，如果有知道为什么的一定要评论告诉我。第二种加时间戳的方法就是避免了缓存，但是因为要画到PDF上所以只是画上了黑色的一个框，图的占位有了，但是图没有出来，如果又有知道为什么的请及时告诉我
效果图
这个是个表情包是我后加的，不想让你们看出来我加了什么水印。
因为放大了canvas会变得清晰但是canvas在每个浏览器会限制高度，所以这个页面在IE上只能导出4页多一点就会黑屏，因为IE的高度是八千多，所以这个方法导出PDF只是适用固定高度的或者是内容不多的。还是建议在服务端导出PDF吧，没有那么多的限制
至此，就可以到处PDF文件了，写的不好，不喜勿喷
