简介

读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。 一个 Excel 电子表格文件逆向工程项目。 注意：excelJS 没有实现 Brower 端操作文件，如果要解析 **.xlsx 文件只能在 node 端

安装或引入

  1. // ExcelJS 在 dist/ 文件夹内发布了两个支持浏览器的包：
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.js"></script>
  3. <script src="exceljs.js"></script>
  5. // 使用 npm:
  6. npm install exceljs
  1. import * as XLSX from 'xlsx';

json转excel文件

  1. async function jsonToExcel() {
  2.   /* 创建一个工作薄 */
  3.   const workbook = new window.ExcelJS.Workbook();
  5.   /* 创建sheet对象 */
  6.   const sheet = workbook.addWorksheet('表一');
  8.   /* 添加表头 */
  9.   sheet.columns = [
  10.     {
  11.       header: '工号',
  12.       key: 'id',
  13.       width: 15,
  14.       // style: {
  15.       //   font: { name: 'Arial', size: 12 },
  16.       //   border: {
  17.       //     top: { style: 'thin' },
  18.       //     left: { style: 'thin' },
  19.       //     bottom: { style: 'thin' },
  20.       //     right: { style: 'thin' },
  21.       //   },
  22.       //   alignment: {
  23.       //     vertical: 'middle',
  24.       //     horizontal: 'center',
  25.       //   },
  26.       // },
  27.     },
  28.     { header: '姓名', key: 'name', width: 15 },
  29.   ];
  31.   /* 需要添加的数据 */
  32.   const data = [
  33.     {
  34.       id: 'wb-01',
  35.       name: '丁博洋',
  36.     },
  37.     {
  38.       id: 'wb-02',
  39.       name: '丁博洋',
  40.     },
  41.   ];
  42.   /* 将数据一行一行添加到sheet对象中 */
  43.   data.forEach((item) => sheet.addRow(item));
  45.   /* 遍历工作表的行row */
  46.   sheet.eachRow((row, rowNumber) => {
  47.     /* 遍历工作表的列cell */
  48.     row.eachCell((cell, colNumber) => {
  49.       // 设置第一行样式
  50.       if (rowNumber === 1) {
  51.         // 设置对齐样式
  52.         cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
  53.         // 设置字体样式
  54.         cell.font = { bold: true, size: 14, name: 'Arial' };
  55.         // 设置背景样式
  56.         cell.fill = {
  57.           type: 'pattern',
  58.           pattern: 'solid',
  59.           fgColor: { argb: 'FF5050E6' },
  60.         };
  61.       }
  62.       // 设置边框
  63.       cell.border = {
  64.         top: { style: 'thin' },
  65.         left: { style: 'thin' },
  66.         bottom: { style: 'thin' },
  67.         right: { style: 'thin' },
  68.       };
  69.       // 设置列宽
  70.       // sheet.getColumn(colNumber).width = 25;
  71.     });
  72.     // 设置行高
  73.     row.height = 25;
  74.   });
  75.   /* 将工作表转为 buffer 对象 */
  76.   const buffer = await workbook.xlsx.writeBuffer();
  78.   /* 将 buffer 装化成blob对象 */
  79.   var blob = new Blob([buffer], {
  80.     type: 'application/octet-stream',
  81.   });
  83.   /* 下载 blob 文件 */
  84.   openDownloadDialog(blob, `模板.xlsx`);
  85. }
  87. // 将blob对象创建bloburl，然后用a标签实现弹出下载框
  88. function openDownloadDialog(blob, fileName) {
  89.   const link = document.createElement('a');
  90.   link.href = window.URL.createObjectURL(blob);
  91.   link.download = fileName;
  92.   link.click();
  93.   window.URL.revokeObjectURL(link.href);
  94. }

excel转json

注意：exceljs 在浏览器端是不能操作文件，在nodejs项目中就可以使用它来读取、编辑.xlsx文件

参考文档