Как экспортировать данные отрендеренной таблицы в pdf файл или любой другой формат вactjs

Question

Я работаю над экспортом данных таблицы в формат pdf, используя Reactjs. Я показываю json data в виде таблицы HTML внутри Reactjs component.

Я дал кнопку с именем Export для экспорта данных в любой формат. На данный момент я работаю только для экспорта данных в формат PDF. Кто-нибудь может мне с этим помочь. Существует ли какой-либо пакет для импорта или какой-либо конкретный код для экспорта данных в файл PDF. Все может быть полезным. Заранее спасибо ...

Answer 1

Вы можете преобразовать свою dom в 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 (работает только с таблицей или 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 и проверьте демонстрационный файл. тогда используйте это. ссылка ниже.

tableExport.jquery.plugin-мастер