如何使用jsPDF和html2Canvas计算div高度,将其转换为图像以适合PDF?

时间:2019-12-28 06:48:21

标签: javascript reactjs jspdf html2canvas

我正在使用html2canvas将div转换为图像。

我想计算div的高度(以像素为单位),以使其适合于PDF页面并保持图像的长宽比 它应该适用于所有窗口大小(大屏幕,IPAD,台式机,笔记本电脑)。

我正在使用jsPDF生成PDF

这是小提琴的例子 http://jsfiddle.net/akshay1818/ys0z984x/51/

HTML代码

<div id="target">
    Set div height(in px) such that it will fit on the page maintaing the aspect ratio
</div>

<button onclick="takeScreenShot()">to pdf</button>

JavaScript代码

window.takeScreenShot =function() {
      const layout = document.getElementById("target");
      const doc = new jsPDF("l", "mm", "a4");

       const canvasimg = html2canvas(layout).then(async(canvasimg)=>{
            let doc = new jsPDF("l", "mm", "a4");
            let img = canvasimg.toDataURL('image/png');
            const imgProps = doc.getImageProperties(img);
            const pdfWidth = doc.internal.pageSize.getWidth();
            var pdfPgHt = doc.internal.pageSize.getHeight();
            const imgRatioHeight = (imgProps.height * pdfWidth) / imgProps.width;
            doc.addImage(img, 'PNG', 0, 0, pdfWidth, imgRatioHeight);
            doc.save('report.pdf');
       })
}

谢谢。

0 个答案:

没有答案