如何将呈现的 table 数据导出到 pdf 文件或 reactjs 中的任何其他格式

Question

我正在努力使用 Reactjs 将 table 数据导出为 pdf 格式。我在 Reactjs component.

中以 HTML table 的形式显示 json data

我已经给出了一个名为 Export 的按钮来以任何格式导出数据。现在我只致力于将数据导出为 PDF 格式。谁能帮我这个。是否有任何要导入的包或要执行的任何特定代码才能将数据导出到 PDF 文件。任何东西都可能有用。提前致谢...

Answer 1

您可以将 dom 转换为 canvas 并将 canvas 另存为 pdf，

DOM 到 canvas,

const input = document.getElementById('mytable');
html2canvas(input)
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
  })
;

Canvas 到 pdf,

html2canvas(input)
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save("download.pdf");  
  });
;

参考https://medium.com/@shivekkhurana/how-to-create-pdfs-from-react-components-client-side-solution-7f506d9dfa6d

按照建议，

我们也可以使用jspdf-autotable生成pdf（仅适用于table或jsonarray），

var doc = new jsPDF();
    // You can use html:
    doc.autoTable({html: '#my-table'});

    // Or JavaScript:
    doc.autoTable({
        head: [['Name', 'Email', 'Country']],
        body: [
            ['David', 'david@example.com', 'Sweden'],
            ['Castille', 'castille@example.com', 'Norway'],
            // ...
        ]
    });

    doc.save('table.pdf');

Answer 2

下载.zip 文件并查看演示文件。然后使用它。 link 下面。

tableExport.jquery.plugin-master

如何将呈现的 table 数据导出到 pdf 文件或 reactjs 中的任何其他格式

How to export a rendered table data to pdf file or any other format in reactjs

html

render

html-to-pdf

reactjs