jspdf

使用html2canval将html转为canvas，再使用jspdf实现导出pdf。

需设置要导出的每一页为1400*900。
要导出pdf的父元素容器不能有隐藏和滚动条，隐藏部分html2canval无法截屏转为canvas。

<script src="./static/js/libs/jspdf/jsdpf.min.js"></script>
<script src="./static/js/libs/jspdf/html2canvas.min.js"></script>

function handleDownloadPdf(id,name){
      var copyDom = $("#"+id)[0];//id为要导出的容器的id
      
      // 内容高度
      var heightPage = 900
      // PDF每页高
      var heightPDF = 500
      // 宽高比
      var widthPage = heightPDF / 900.00 * 1400.00
      
      //html转成canvas
      html2canvas(copyDom,{
        scale: 1,
        width: 1400 ,
        heigth: copyDom.offsetHeight,
        allowTaint :true,
        useCORS: true,
      }).then(function(canvas){
  
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = heightPage * 1;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = widthPage;
        var imgHeight = widthPage / contentWidth * contentHeight;

		//canvas生成pdf
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('l', 'pt', [widthPage, heightPDF]);
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= heightPDF ;
            //避免添加空白页c
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save(name+'.pdf');
      });
    }