如何在材料表中自定义默认导出选项答案

【问题标题】：How to customize default export option in material-table如何在材料表中自定义默认导出选项
【发布时间】：2021-03-08 09:05:09
【问题描述】：

我正在使用material-table，我想删除默认的 CSV 和 PDF 导出选项。

我希望只有一个 Excel 选项。

如何更改菜单？

谢谢

【问题讨论】：

表示您删除 export as pdf 并将文本从 export as csv 重命名为 export as excel?
是的。最终我想以excel格式导出表格数据。
csv是excel格式

标签： reactjs material-ui material-table

【解决方案1】：

像这样在 MT 组件上定义 options 将允许您显示/隐藏每个选项：

  options={{
      // ..other options
      exportButton: {
        csv: true,
        pdf: false
      }
   }}

另外，您可以使用localization 设置重命名每个选项的标签，如下所示：

 localization={{
      toolbar: {
        exportCSVName: "Export some Excel format",
        exportPDFName: "Export as pdf!!"
      }
    }}

看起来官方文档有点过时了，所以我在 GitHub 的这些线程上找到了您正在寻找的答案：

工作沙盒here。祝你好运！

【讨论】：

完美！我也在使用没有这个选项的旧版本。谢谢

【解决方案2】：

对于自定义 CSV 和 PDF，您应该定义 options

 options={{
    exportButton: {
       csv: true,
       pdf: true,
    }
 }}

并且应该为处理程序定义更多选项

 options={{
    exportButton: {
       csv: true,
       pdf: true,
    },
    exportCsv: (data, columns) => console.log(data, columns, '<== CSV'),
    exportPdf: (data, columns) => console.log(data, columns, '<== PDF'),
 }}

在 CSV 的处理函数中，您可以使用 filefy 包

import { CsvBuilder } from 'filefy';

对于 PDF，您可以使用 jspdf 和 jspdf-autotable 包

import jsPDF from 'jspdf';
import 'jspdf-autotable';

还有处理程序示例

exportCsv: (data, columns) => {
  const columnTitles = columns
      .map(columnDef => columnDef.title);
  
  const csvData = data.map(rowData =>
        columns.map(columnDef => rowData[columnDef.field]),
      );

  const builder = new CsvBuilder(`data.csv`)
        .setColumns(columnTitles)
        .addRows(csvData)
        .exportFile();

  return builder;
}

exportPdf: (data, columns) => {
  const doc = new jsPDF();

  const columnTitles = columns
      .map(columnDef => columnDef.title);
  
  const pdfData = data.map(rowData =>
        columns.map(columnDef => rowData[columnDef.field]),
      );

  doc.autoTable({
     head: [columnTitles],
     body: pdfData,
  });

  doc.save(`data.pdf`);
}

【讨论】：