jspdf+html2canvas实现pdf导出

1.原理

 将html转化为canvas，再将canvas图片转化为pdf

2.源码

html2canvas(document.getElementById('PDF')).then((canvas) => {//获取需要html转化为pdf的元素id
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        console.log('contentWidth', contentWidth);
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89;
        console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhh');
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //pdf页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = (592.28 / contentWidth) * contentHeight;
        // src/assets/imgs/title_bg.png
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('', 'pt', 'a4');
        //自定义报告封面
        pdf.addImage('src/assets/imgs/report_cover.png', 'PNG', 0, 0, imgWidth, 842.4);
        pdf.addPage();//分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'PNG', 0, 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            // 避免添加空白页
             if (leftHeight > 0) {
               pdf.addPage();
             }
          }
        }
        pdf.save('content.pdf');
      });
 

3.效果

标签：jspdf,canvas,html2canvas,leftHeight,html,pdf,var,contentWidth
来源： https://blog.csdn.net/qq_40420929/article/details/120140922