使用带有表格的 html2canvas - React答案

【问题标题】：Using html2canvas with table - React使用带有表格的 html2canvas - React
【发布时间】：2021-10-10 11:15:42
【问题描述】：

我正在尝试获取表格的快照并在 React 中使用 html2canvas 和 jsPDF 生成 pdf。但是问题只是生成了可见的表格部分，而不可见的表格的水平和垂直可滚动部分没有进入pdf。对此问题的任何帮助都将受到高度赞赏。提前致谢。

html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });

【问题讨论】：

标签： html reactjs jspdf html2canvas

【解决方案1】：

由于我不确切知道您正在使用的页面，但我希望我在旧项目中的代码可以帮助您。您的问题可能来自未定义的宽度和高度。

 processPdf = () => {
        const foo = document.getElementById('canvas');
    
        html2canvas(foo)
            .then((canvas) => {
                var width = pdf.internal.pageSize.getWidth();
                var height = pdf.internal.pageSize.getHeight();
                const handledImage = canvas.toDataURL('image/png');
                const pdf = new jsPDF('p', 'px', 'a4');
                pdf.addImage(handledImage, 'JPEG', 0, 0, width, height);
                pdf.save("test.pdf");
            });
    };

【讨论】：

【解决方案2】：

如果您需要在 pdf 文件上导出表格，则不应为此目的使用 html2canvas。我认为最好使用 jsPDF 和 jspdf-autotable 将表格导出为 pdf。

示例：Export to PDF in React-Table

【讨论】：