Ant Deign Pro - ProTable - 高级表格 通用打印组件

Ant Design Pro 是基于Ant Design和Umi.js的企业级中后台解决方案，ProTable 是其中的一个高级表格组件，用于简化表格的开发流程。

在Ant Design Pro中，通常会有一个通用的打印组件用于处理表格数据的打印。以下是一个简单的示例，展示如何创建一个通用的打印组件，用于Ant Design Pro的ProTable组件。

import { Button, Popconfirm, Table } from 'antd';
import { useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
const CommonPrint = ({ tableRef }) => {
  const handlePrint = () => {
    const tableNode = tableRef.current;
    html2canvas(tableNode).then((canvas) => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF({
        orientation: 'landscape',
      });
      const imgProps = pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      pdf.save('table.pdf');
    });
  };
 
  return (
    <Button type="primary" onClick={handlePrint}>
      打印
    </Button>
  );
};
 
export default () => {
  const tableRef = useRef(null);
  return (
    <>
      <ProTable
        ref={tableRef}
        // ... 其他 ProTable 属性
      />
      <CommonPrint tableRef={tableRef} />
    </>
  );
};

在这个示例中，我们定义了一个CommonPrint组件，它接收一个ref（tableRef），该ref指向包含表格的DOM元素。handlePrint函数使用html2canvas库将表格转换为一个canvas，然后使用jsPDF库将canvas保存为PDF文件。

在ProTable组件外部，我们创建了一个tableRefref，并将其传递给CommonPrint组件。当用户点击打印按钮时，handlePrint函数被调用，并生成PDF文件。这个通用打印组件可以被应用中的任何ProTable实例使用，简化打印功能的实现。