如何用自定义映射的对象导出到Excel(附实例)

221 阅读1分钟

我按照这个教程将数据从数据库导出到excel,我有一些想法,我需要做什么?

1.问题当我做modelsList.filter(e => e.id === item.model_id).map(res => { return res.model_name }) ,它应该返回模型名称,但当我导出到Excel时,我得到的是空值。我试过console.log(customHeadings) ,它在数组中返回模型,如Model: ['2Gdsmodeln'] ,我怎样才能从返回的方括号中删除?

2.问题"Date": item.date 返回的日期是正确的,但在excel中我认为它使用了一些excel函数,而一些日期是在excel函数中,所以有什么办法在导出到excel时禁止编辑值?

1.问题我可以用css来表示日期和模型的标题吗,比如让它的字体变粗?

要创建数据

//export to excel
    const [data, setData] = React.useState([])
    const customHeadings = testsList.map(item => {
        return ({
            "Date": item.date,
            "Model": modelsList.filter(e => e.id === item.model_id).map(res => { return res.model_name })
        })
    })
    React.useEffect(() => {
        setData(customHeadings)
    }, [])

导出按钮

import { ExportToExcel } from "./ExportToExcel.js"
<ExportToExcel apiData={data} fileName="export_testu" classb="btn btn-default" button="Export testů" />

ExportToExcel.js

import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName, button, classb }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
  };

  return (
    <button onClick={(e) => exportToCSV(apiData, fileName)} className={classb}>{button}</button>
  );
};