react 使用第三方插件xlsx完成前端下载表格（后端返回数据为数组）

原创已于 2024-10-09 18:38:35 修改 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-10-09 18:33:51 首次发布

因npm官网示例不全，为方便使用贴出详细示例。
1、download.ts 工具函数封装

import * as XLSX from 'xlsx';
import { message } from 'antd';
import { format } from '@/utils/common';
export function xlsxDownload(list: any, columnsData: any) {
  console.log(list, columnsData);
  const rows = [];
  if (list.length > 0) {
    for (let i = 0; i < list.length; i++) {
      const rowObj = {};
      for (let obj in columnsData) {
        let heardName = columnsData[obj].title;
        const rowObjDetails = list[i];
        rowObj[heardName] = rowObjDetails[obj];
      }
      rows.push(rowObj);
    }
  }
  if (rows && rows.length > 0) {
    const sheet = XLSX.utils.json_to_sheet(rows);
    // const rowCount = rows.length;
    const colCount = Object.keys(rows[0]).length;
    sheet['!cols'] = new Array(colCount);
    // const rowAll = XLSX.utils.decode_range(sheet['!ref']);
    const nowData = new Date();
    const defaultNowData = format(nowData, 'yyyy-MM-dd');
    console.log(defaultNowData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, sheet, '任务明细');
    XLSX.writeFile(wb, `${defaultNowData}.xlsx`, { compression: true });
  } else {
    message.warning('无数据可导出');
  }
}

2、食用方法，请求接口调用使用的umi框架可自行替换

import { xlsxDownload } from '@/utils/download'

  //下载表格表头数据
  const columnsData = {
    taskId: { title: '任务ID' },
    taskName: { title: '任务名称' },
    taskSource: { title: '任务来源' },
  }

  //导出 xlsx格式下载
  const showModal = () => {
    Modal.confirm({
      title: '下载提示',
      content: <>确认下载？</>,
      async onOk () {
        const formValue = formRefOut.current?.getFieldsValue()
        console.log(formValue, 'formValue----')
        const { list: downloadData } = await dispatch?.({
          type: 'indexManageModel/getTaskTableListAllList',
          payload: { current: 1, pageSize: 9999 },
        })
        xlsxDownload(downloadData, columnsData)
      },
    })
  }