用js-xlsx实现前端导入导出，真香!

前言

本文以js-xlsx实现表格的导入和导出
官网：github.com/SheetJS/she…

安装xlsx

yarn add xlsx

使用

import XLSX from 'xlsx'

导出实现

import XLSX from 'xlsx';
import { Button } from 'antd';
// import XLSXS from 'xlsx-style'

export default function ExportExcelWithJsXlsx() {
  const [list, setList] = useState([]);

  useEffect(() => {
    generateData();
  }, []);

  const generateData = () => {
    let arr = [];
    for (let i = 0; i < 5000; i++) {
      arr.push({
        ID: i,
        姓名: `胡某某${i}号`,
        年龄: 10 + i,
        性别: i % 2 === 0 ? '男' : '女',
      });
    }
    setList(arr);
  };
  const exportExcel = () => {
    // 创建工作薄
    const workbook = XLSX.utils.book_new();
    // 利用XLSX的json_to_sheet工具将json数据转化为表
    const workSheet = XLSX.utils.json_to_sheet(list);
    // 设置表格范围
    workSheet['!ref'] = `A1:AI${list.length + 1}`;
    // 利用XLSX的book_append_sheet工具将表添加到excel文档中
    XLSX.utils.book_append_sheet(workbook, workSheet, 'sheet0');
    // 执行数据转换文件写入
    XLSX.writeFile(workbook, '个人信息.xlsx', {
      bookType: 'xlsx',
      bookSST: true,
      type: 'array',
    });
  };

  return (
    <Button onClick={exportExcel} type="primary" style={{ marginTop: 20 }}>
      下载Excel
    </Button>
  );
}

导入实现

import { Upload, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;
export default function ImportExcelWithJsXlsx() {
  // 文件转为json数据
  const fileToJson = (fileList, callback) => {
    const rABS = true;
    const reader = new FileReader();
    reader.onload = function async(e) {
      let data = e.target.result;
      if (!rABS) data = new Uint8Array(data);
      import('xlsx').then((xlsx) => {
        const workbook = xlsx.read(data, {
          type: rABS ? 'binary' : 'array',
        });
        // 假设我们的数据在第一个标签
        const firstWorksheet = workbook.Sheets[workbook.SheetNames[0]];
        // XLSX自带了一个工具把导入的数据转成json
        const jsonArr = xlsx.utils.sheet_to_json(firstWorksheet, { header: 1 });
        callback(jsonArr);
      });
    };
    if (rABS) reader.readAsBinaryString(fileList);
    else reader.readAsArrayBuffer(fileList);
  };

  // 上传文件
  const handleFileChange = (info) => {
    const { fileList: file } = info || {};
    if (file.length) {
      const choosefile = file[0];
      fileToJson(choosefile.originFileObj, (jsonArr) => {
        console.log('jsonArr=>', jsonArr);
      });
    }
  };

  return (
    <div>
      <Dragger
        onChange={handleFileChange}
        style={{ width: '50%', marginTop: 20 }}
        name="file"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      >
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击选择或拖拽文件到线框中上传</p>
        <p className="ant-upload-hint">
          仅支持小于2M的XLSX、XLS格式的excel文件
        </p>
      </Dragger>
    </div>
  );
}

总结

以上为使用js-xlsx实现前端导入和导出数据的过程。