安装或引入

  1. /**
  2.  * 在浏览器中，只需添加脚本标记：
  3.  * cdn 资源包网址: https://cdnjs.com/libraries/xlsx
  4.  */
  5. <script src="https://oss.sheetjs.com/sheetjs/tests/xlsx.full.min.js"></script>
  7. 使用 npm:
  8. $ npm install xlsx
  1. import * as XLSX from 'xlsx';

导出excel

Json/二维数组导出excel

  1. function exportExcel() {
  2.   /* 创建一个工作薄 */
  3.   let workbook = XLSX.utils.book_new();
  5.   /* 使用 XLSX.utils.aoa_to_sheet(data) 创建sheet对象, data 为二位数组 */
  6.   const aoaSheet = XLSX.utils.aoa_to_sheet([
  7.     ['周一', '周二', '周三', '周四', '周五'],
  8.     ['语文', '数学', '历史', '政治', '英语'],
  9.     ['数学', '数学', '政治', '英语', '英语'],
  10.     ['政治', '英语', '历史', '政治', '数学'],
  11.   ]);
  13.   /* 使用 XLSX.utils.json_to_sheet(data) 创建sheet对象, data 为json对象 */
  14.   const jsonSheet = XLSX.utils.json_to_sheet(
  15.     [
  16.       { 周一: '语文', 周二: '数学', 周三: '历史', 周四: '政治', 周五: '英语' },
  17.       { 周一: '数学', 周二: '数学', 周三: '政治', 周四: '英语', 周五: '英语' },
  18.       { 周一: '政治', 周二: '英语', 周三: '历史', 周四: '政治', 周五: '数学' },
  19.     ],
  20.     {
  21.       // 序列化表头
  22.       header: ['周五', '周四', '周三', '周二', '周一'],
  23.       // 忽略原来的表头
  24.       // skipHeader: true,
  25.     },
  26.   );
  28.   /* 使用指定的单元格作为起点插入数据，r：行， c：列，详情看官网文档 */
  29.   // XLSX.utils.sheet_add_aoa(
  30.   //   aoaSheet,
  31.   //   [
  32.   //     ['数学', '语文'],
  33.   //     ['政治', '语文'],
  34.   //     ['历史', '政治'],
  35.   //   ],
  36.   //   { origin: { r: 2, c: 4 } },
  37.   // );
  39.   /* 设置表格样式，!cols为列宽 */
  40.   aoaSheet['!cols'] = [{ wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }];
  42.   /* 将sheet 对象添加到工作薄中，支持多个sheetData */
  43.   XLSX.utils.book_append_sheet(workbook, aoaSheet, 'aoaSheet');
  44.   XLSX.utils.book_append_sheet(workbook, jsonSheet, 'jsonSheet');
  46.   /* 生成excel的配置项 */
  47.   var options = {
  48.     // 要生成的文件类型
  49.     bookType: 'xlsx',
  50.     // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  51.     bookSST: false,
  52.     // 二进制类型
  53.     type: 'binary',
  54.   };
  56.   /* 尝试编写工作簿 wb,在基于浏览器的环境中，它将尝试强制客户端下载*/
  57.   XLSX.writeFile(workbook, '课程表.xlsx', options);
  58. }

另一种写法

  1. /* 创建一个工作薄 */
  2. let workbook = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
  4. /* 使用 XLSX.utils.aoa_to_sheet(data) 创建sheet对象, data 为二位数组 */
  5. const sheet = XLSX.utils.json_to_sheet([['数学', '语文']]);
  7. /* 合并单元格 */
  8. // data['!merges'] = [
  9. //   {
  10. //     //合并第一行数据[B1,C1,D1,E1]
  11. //     s: {
  12. //       //s为开始
  13. //       c: 1, //开始列
  14. //       r: 0, //开始取值范围
  15. //     },
  16. //     e: {
  17. //       //e结束
  18. //       c: 4, //结束列
  19. //       r: 0, //结束范围
  20. //     },
  21. //   },
  22. // ];
  24. /* 将sheet 对象添加到工作薄中，支持多个sheetData */
  25. wb.Sheets['Sheet1'] = sheet;

table表格导出excel

参考标题连接

使用 xlsx 修改样式（文字大小颜色）

  • js-xlsx 只能设置，行宽等简单的颜色， 设置背景色，自动换行等样式（也就是cell.s 这个属性）暂不支持， 他的pro版收费， 但是支持多种样式设置；
  • 设置样式可以使用 xlsx-style，可能是版本问题 xlsx-style 会报错

excel导入解析

excel解析json

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>示例</title>
  6.   </head>
  7.   <body>
  8.     <input id="input" type="file" accept=".xls,.xlsx,.csv" />
  9.     <!-- <div id="myBtn">88</div> -->
  10.     <script src="https://oss.sheetjs.com/sheetjs/tests/xlsx.full.min.js"></script>
  11.     <script>
  12.       let inputDom = document.getElementById('input');
  13.       inputDom.addEventListener('change', (evt) => {
  14.         // 获取 file 文件
  15.         var selectedFile = evt.target.files[0];
  16.         var reader = new FileReader();
  17.         reader.onload = function (event) {
  18.           // 数据读取存放
  19.           const dataArr = [];
  20.           var data = event?.target?.result;
  21.           // 将文件转为二进制
  22.           var workbook = XLSX.read(data, {
  23.             type: 'binary',
  24.           });
  25.           // 获取工作蒲的工作表名称
  26.           workbook.SheetNames.forEach(function (sheetName, index) {
  27.             let XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {
  28.               // 可以指定对象属性值
  29.               // header: [
  30.               //   'userId',
  31.               //   'empId',
  32.               //   'userName',
  33.               //   'indexCode',
  34.               //   'weight',
  35.               //   'indexValue',
  36.               //   'rowNum',
  37.               // ],
  38.             });
  39.             if (XL_row_object.length > 0) {
  40.               console.log(XL_row_object, '有数据啦...');
  41.             }
  42.           });
  43.           inputDom.value = '';
  44.         };
  45.         reader.onerror = function (event) {
  46.           console.error('File could not be read! Code ' + event?.target?.error?.code);
  47.         };
  48.         // 读取上传文件为二进制
  49.         reader.readAsBinaryString(selectedFile);
  50.       });
  51.     </script>
  52.   </body>
  53. </html>

参考文档