标签：jspdf canvas html2canvas leftHeight html pdf var contentWidth

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。