将HTMLtoCanvas保存为PDF使用JSPDF高度页面问题

时间:2019-10-27 16:09:26

标签: javascript jspdf

我创建了将html转换为画布并成功创建宽度为1140且高度为4033的图像的函数,我将其用于创建pdf使用jspdf,以实现图像宽度的完美匹配,但是对于高度,我遇到了分页符和许多问题页面创建的不仅仅是图片。

这是我的代码

function saveAsPDF() {
           html2canvas(document.getElementById("chart-container"), {
              onrendered: function(canvas) {
                var imgWidth = 210; 
                var pageHeight = 210;  
                var imgHeight = canvas.height * imgWidth / canvas.width;
                var heightLeft = imgHeight;
                var position = 0;
                var myImage = canvas.toDataURL("image/png");
                window.open(myImage);
                var img = canvas.toDataURL(); //image data of canvas
                var doc = new jsPDF();
                doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;

                while (heightLeft >= 0) {
                  position += heightLeft - imgHeight; // top padding for other pages
                  doc.addPage();
                  doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);
                  heightLeft -= pageHeight;
                }
                var date = (new Date()).toISOString().split('T')[0];
                doc.save('Report.pdf');
              }
           });
} 

我需要帮助

0 个答案:

没有答案