JavaScript生成xlsx具有样式
时间: 2025-06-29 20:06:24 浏览: 4
### 使用 JavaScript 创建具有样式的 Excel (XLSX) 文件
为了实现这一目标,可以采用 `xlsx-style` 插件来增强标准 XLSX 功能,允许设置单元格样式、合并单元格以及调整行列宽度等特性[^1]。
#### 准备工作
首先,在项目环境中安装所需的库。对于基于 Vue 的应用或其他前端框架,可以通过 npm 或 yarn 来完成依赖项的安装:
```bash
npm install xlsx xlsx-style
```
接着,在代码文件顶部导入必要的模块:
```javascript
import * as XLSX from 'xlsx';
import 'xlsx-style'; // 加载额外的支持以处理样式
```
#### 数据准备与转换
构建要写入电子表格的数据结构,通常是以二维数组的形式呈现,其中每个子数组代表一行记录。如果存在表头,则应作为第一个元素加入该列表中[^3]。
```javascript
const data = [
["姓名", "年龄", "性别"], // 表头
["张三", 25, "男"],
["李四", 30, "女"]
];
```
#### 构建 Sheet 和 Workbook 对象
利用上述数据创建一个新的 worksheet 实例,并通过特定属性配置其外观特征,比如字体颜色、背景填充色或是边框线型等[^4]。
```javascript
// 初始化一个空的工作簿实例
let wb = XLSX.utils.book_new();
// 将原始数据转化为worksheet格式
let ws = XLSX.utils.aoa_to_sheet(data);
// 自定义样式应用于指定区域内的所有单元格
ws['A1'].s = {
font: { bold: true },
fill: { fgColor: { rgb: "FFCC00" } }
};
// 合并某些连续排列的多个单元格形成更大范围的选择区
ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
// 设定各列的具体显示宽度
ws['!cols'] = [{ wch: 20 }, { wch: 10 }, { wch: 8 }];
// 调整各行高度
ws['!rows'] = [{ hpx: 20 }];
```
#### 导出功能实现
最后一步就是把已经编辑完毕的工作薄保存下来供用户下载。这里提供了一个简单的函数用于触发浏览器端的实际导出操作[^2]。
```javascript
function saveWorkbook(wb, filename){
/* generate an array of uint8 values */
let wbout = XLSX.write(wb, { bookType:'xlsx', type:'array' });
try {
FileSaver.saveAs(new Blob([wbout],{type:"application/octet-stream"}), filename);
} catch(e) {
console.error("Browser does not support saving files directly.");
}
}
saveWorkbook(wb, 'styled-excel-file.xlsx');
```
阅读全文
相关推荐


















