前端实现导出Excel表格——SheetJS与xlsx-style的综合应用

简介

本项目利用SheetJS和xlsx-style库，实现了前端导出Excel表格的功能，并提供了丰富的单元格样式设置，包括背景色、居中对齐、自动换行、列宽调整以及百分数展示等。通过本项目，您可以轻松地将前端数据导出为格式丰富的Excel文件。

功能特点

• 背景色设置：自定义单元格背景颜色。
• 居中对齐：单元格内容水平和垂直居中。
• 自动换行：单元格内容自动换行显示。
• 列宽调整：自定义列宽以适应内容。
• 百分数展示：将数值格式化为百分数形式。

使用方法

1. 安装依赖：

   npm install xlsx xlsx-style
   

2. 引入库：

   import XLSX from 'xlsx';
   import XLSX_STYLE from 'xlsx-style';
   

3. 编写导出逻辑：

   // 示例代码，具体实现请参考项目中的代码
   const workbook = XLSX.utils.book_new();
   const worksheetData = [
     ['姓名', '年龄', '成绩'],
     ['张三', 25, 88.5],
     ['李四', 28, 92.3]
   ];
   const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
   
   // 设置单元格样式
   worksheet['A1'].s = {
     fill: { fgColor: { rgb: 'FFFF0000' } }, // 背景色
     alignment: { horizontal: 'center', vertical: 'center', wrapText: true } // 居中对齐和自动换行
   };
   
   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
   const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
   
   function s2ab(s) {
     const buf = new ArrayBuffer(s.length);
     const view = new Uint8Array(buf);
     for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
     return buf;
   }
   
   const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
   const url = window.URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
   a.download = 'example.xlsx';
   a.click();
   window.URL.revokeObjectURL(url);
   

示例

请参考项目中的example.js文件，其中包含了详细的导出Excel表格的示例代码。

贡献

欢迎提交Issue和Pull Request，共同完善本项目。

许可证

本项目采用MIT许可证，详情请参阅LICENSE文件。

---

通过本项目，您可以轻松实现前端导出格式丰富的Excel表格，希望对您的工作和学习有所帮助！

下载链接

前端实现导出Excel表格SheetJS与xlsx-style的综合应用