将Ant设计表导出为pdf格式

npm install html2pdf.js

yarn add html2pdf.js

import html2pdf from 'html2pdf.js';

const tableElement = document.getElementById('table-container');

const options = {
    margin: 10,
    filename: 'table.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};

html2pdf().from(tableElement).set(options).save();

import React, { useEffect } from 'react';
import { Table } from 'antd';
import html2pdf from 'html2pdf.js';

const dataSource = [
  {
    key: '1',
    name: 'John Doe',
    age: 30,
    address: '123 Main St',
  },
  {
    key: '2',
    name: 'Jane Doe',
    age: 25,
    address: '456 Elm St',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const TableExport = () => {
  useEffect(() => {
    const exportButton = document.getElementById('exportButton');
    exportButton.addEventListener('click', () => {
      const tableElement = document.getElementById('table-container');
      const options = {
        margin: 10,
        filename: 'table.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
      };

      html2pdf().from(tableElement).set(options).save();
    });
  }, []);

  return (
    <div>
      <button id="exportButton">Export to PDF</button>
      <div id="table-container">
        <Table dataSource={dataSource} columns={columns} />
      </div>
    </div>
  );
};

export default TableExport;