React导出excle

227 阅读2分钟

React导出excle

导出excle

在React项目中导入excle,我们可以使用xlsx插件来实现

(1)下载插件

yarn add xlsx

(2)自定义hook函数

导入导出插件在项目中经常会用到,我们可以将这个功能封装为自定义hook,后续可以在任何一个页面或者组件中使用。

src/hooks/useExportExcle.js

import * as XLSX from "xlsx"
const useExportExcle = () => {
    const handleExportAll = (header, dataSource,fileName) => {
        const json = dataSource.map((item) => {
            return Object.keys(item).reduce((dataSource, key) => {
                const newKey = header[key] || key
                dataSource[newKey] = item[key]
                return dataSource
            }, {})
        });
        const sheet = XLSX.utils.json_to_sheet(json);
        openDownloadDialog(sheet2blob(sheet, undefined), `${fileName}.xlsx`);
    }

    const openDownloadDialog = (url, saveName) => {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent('click');
        else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    }

    const sheet2blob = (sheet, sheetName) => {
        sheetName = sheetName || 'sheet1';
        var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

        var wopts = {
            bookType: 'xlsx', // 要生成的文件类型
            bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
            type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }); // 字符串转ArrayBuffer
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }

        return blob;

    }

    return {handleExportAll}
}

export default useExportExcle

需要注意的是,我们导出的自定义hook需要接受两个参数,一个导出数据的header,还有一个导出数据的dataSource

(3)组件中调用hook函数

import useExportExcle from '../../hooks/useExportExcle'

export default function Main() {
  const [dataSource, setDataSource] = useState([
    { column_1: "bobo", column_2: "成都", column_3: "武侯区" }
  ])
  const { handleExportAll } = useExportExcle()
  const header = {
    "column_1": "表头1",
    "column_2": "表头2",
    "column_3": "表头3"
  }
  const fileName = "文件名字"
  
  return (
  	<Button onClick={()=>handleExportAll(header,dataSource,fileName)}>导出</Button>
  )
}

点击按钮过后就能实现表格的导出功能

效果如下:

image-20231222172959267