表格的Html2canvas仅在可见行中剪切图像(无滚动)

时间:2020-08-16 14:48:00

标签: angular pdf-generation html2canvas

我正在尝试以pdf格式下载表格,该表格是页面的底部组件,但是在获取屏幕截图时,它仅打印可见的行而不滚动。

我不在整个页面上使用html2canvas,而是在页面底部使用了html2canvas,即使下载按钮在页面的底部(可以看到整个表格):

download()
{
    var data = document.getElementById('table'); //Id of the table

    html2canvas(data).then(canvas => {  
        var imgData = canvas.toDataURL('image/png,1.0') 
        var pdf = new jsPdf('l', 'mm', 'a4'); // A4 size page of PDF  

        var width = pdf.internal.pageSize.getWidth();    
        var height = pdf.internal.pageSize.getHeight();

        let widthRatio = width / canvas.width;
        let heightRatio = height / canvas.height;

        let ratio = widthRatio > heightRatio ? heightRatio : widthRatio

        pdf.addImage(imgData, "PNG", 0, 0, canvas.width * ratio, canvas.height * ratio,);
        pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
}

0 个答案:

没有答案