实现思路：
先讲网页通过html2canvas转换成图片，再将图片通过jsPDF转成pdf下载到本地
关键代码：
let el = document.getElementById('my-sample-info'); // 获得目标元素
html2canvas(el, {
background: '#fff', // 背景设置
//Whether to attempt to load cross-origin images as CORS served,
//before reverting back to proxy ,此参数对页面中包含跨域图片时至关重要
useCORS: true,
onrendered (can) { // html到canvas渲染完成时执行
let doc = new JsPDF('p', 'px', 'a4'); // 设置生成pdf的相关参数，''纵向，单位，纸张类型"
let data = can.toDataURL('image/jpeg'); // 将canvas转成dataURL，不通的图片类型data的大小差别较大，也可以设置图片的质量，以控制生成文件的大小
let createPdf = (function (can, doc, data) { //创建PDF
/*
通过canvas生成PDF
@can {object} canvas对象
@doc {object} 使用jsPDF创建的对象
@data {string} canvas通过toDataURL生成的数据
*/
// 获得一页pdf和滚动整个页面生成canvas的高度和宽度，
let [ph, ch, pw, cw] = [doc.internal.pageSize.height, can.height, doc.internal.pageSize.width, can.width]
let h = pw * ch / cw; // 按根据pdf的页面宽度计算canvas的高度
return function getPdf (imgData, k) {
if (ph * k > h) { // 如果pdf页面的总长度大于canvas的高度，跳出递归
doc.deletePage(k + 1); // 删除最后一页的空白
doc.save('test.pdf'); // 保存生成的pdf
return;
}
doc.addImage(imgData, 'PNG', 1, -k * ph + 10, pw, h); //将图片转成PDF，后四个参数分别为左边距，上边距，图片宽度，图片高度，这里将上边距设为负值，是为了将片上移，达到分页的效果
doc.addPage(); // 增加新页面
getPdf(imgData, k + 1); // 递归调用
}
}(can, doc, data));
createPdf(data, 0); // 调用该函数
}
});
遇到的坑－－填平它
- canvas访问图片跨域:
需后端配合设置Access-Control-Allow-Origin，允许我们跨域访问图片，配置html2canvas的userCOR属
性为true - 转成canvas的过程中会莫名奇妙的出现截图不全：
对截图不全的部分写个简单的测试文件，如果测试文件没有问题，就删除项目页面的代码，直到截图正常为
止，找到原因，干掉它
