html2canvas和jsPDF配合实现网站截图并保存为PDF

html2canvas官网地址
jsPDF官网地址

实现思路：

先讲网页通过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); // 调用该函数
  }
});

遇到的坑－－填平它

1. canvas访问图片跨域:
   需后端配合设置Access-Control-Allow-Origin，允许我们跨域访问图片，配置html2canvas的userCOR属
   性为 true
2. 转成canvas的过程中会莫名奇妙的出现截图不全：
   对截图不全的部分写个简单的测试文件，如果测试文件没有问题，就删除项目页面的代码，直到截图正常为
   止，找到原因，干掉它