0

I'm trying to get snapshot of the table and generate a pdf using html2canvas and jsPDF in React. But the isssue is only the part of table that is visible gets generated where as horizontal and vertical scrollable part of table which is invisible is not getting in the pdf. Any help to this issue is highly appreciated. Thanks in advance.

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');
            }
        });
Raj.S
  • 81
  • 1
  • 2
  • 9

2 Answers2

0

Since I dont know exactly the page you are working with but I hope my code in old project can help you. Your problem may come from the width and heigh is not defined.

 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");
            });
    };
An Nguyen
  • 288
  • 1
  • 15
0

If you need to export table on a pdf file you shouldn't use html2canvas for that purpose. I think its better to use jsPDF and jspdf-autotable for exporting table to pdf.

example : Export to PDF in React-Table

hasankzl
  • 666
  • 4
  • 16