纯前端中excel的操作纯前端的excel操作: 在操作的数据比较多的场景时，可以让用户直接上传包含批量数据的Excel

在操作的数据比较多的场景时，可以让用户直接上传包含批量数据的Excel文件，前端对文件进行解析以达到对表单等内容的快速操作。比如品牌门店数达上万家，品牌的运营同学对门店进行管理时，直接对门店依次点选会耗时易出错，更常见（他们更喜欢）的操作是上传excel 进行处理。

在最近的B端需求涉及到了excel的上传、读取、生成、下载几个功能，且在浏览器中直接操作，不与后端交互。

社区推荐的（常用的）几个工具：

1、 sheetjs sheetjs 官网 github star 28k+ 功能强大，支持格式众多（支持xls、xlsx、ods等十几种格式）；目前开源社区最强大的js-xlsx库，适用性极广，但因此牺牲了易用性。API繁多且配置项复杂，需要进行二次封装，在使用上才足够友好；分为社区版&付费版，需要对excel样式操作需使用付费版社区版；
- sheetjs 中核心API
  1）xlsx对象本身提供的功能：
  - 解析数据
  - 导出数据
  2）utils工具类
  - 将数据添加到数据表对象上
  - 将二维数组以及符合格式的对象或者HTML转为工作表对象
  - 将工作簿转为另外一种数据格式
  - 行,列,范围之间的转码和解码
  - 工作簿操作
  - 单元格操作
  react中的使用
2、exceljs

Github star 8.5k 支持读写、操作excel的数据和样式到 XLSX 和 JSON 文件；中文文档使用CommonJS的引入方式，浏览器端推荐使用script引入预打包好的文件；

3、xlsx-populate

github star 700+ 支持样式操作; 浏览器端可以使用Es6的引入方式；

对于excel的上传、读取、生成、下载的功能是比较基础的简单功能，上面这些工具都能支持。比较难的操作是excel的编辑、样式编辑等，这些操作更多特定的场景下出现，比如在线编辑等，具体问题具体分析吧。

sheetjs demo

// excel文件MIME类型
const excelTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];

// 上传excel 并解析
const onExcelUpload  = async (e) => {
  let file = e.target.files[0];
  if (!excelTypes.includes(file.type)) {
    alert('请上传excel格式文件');
    return
  }
  const data = await file.arrayBuffer();
  try {
    // step1: 解析
    const workbook = XLSX.read(data);
    // step2: SheetNames以字符串数组的形式保存了所有的工作表的名称，通过XLSX.utils.sheet_to_json转化为json格式
    const sheetArrays = workbook.SheetNames.map(sheetName => ({
          sheetName,
          data: XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1 }),
    }));
  } catch(e){
    console.log('excel 解析异常');
  }
}
// 导出excel
const onExportExcel = () =>  {
  const data =  [['美团POIID'],[1],[2]];
  try {
    const worksheet = XLSX.utils.aoa_to_sheet(data);
    const new_workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_workbook, worksheet, 'sheetName1');
    XLSX.writeFile(new_workbook, 'filename.xlsx');
  } catch(e) {
    console.log('excel 导出异常')
  }
}

可针对input 限制只上传excel

<input type="file" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

常见 MIME 类型列表

扩展名	文档类型	MIME 类型
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xls	Microsoft Excel	application/vnd.ms-excel
.csv	Comma-separated values (CSV)	text/csv

纯前端中excel的操作

参考资料