怎么使用前端使用xlsx-js-style合并单元格
时间: 2025-07-05 17:08:35 浏览: 2
### 使用 `xlsx-js-style` 实现 Excel 单元格合并
为了在前端使用 `xlsx-js-style` 库实现 Excel 的单元格合并,可以按照以下方法操作:
安装所需的库可以通过命令行执行如下指令完成[^1]。
```bash
npm install xlsx-js-style
```
接下来,在 JavaScript 或 Vue.js 项目中引入该库,并准备要导出的数据源。假设有一个简单的二维数组作为数据源,其中包含一些销售记录的信息。
定义好表头之后,将其加入到主体内容之中形成完整的表格结构。这里的关键在于通过配置项来指定哪些区域内的单元格应该被合并显示。具体来说就是利用 `!merges` 属性来进行设置[^2]。
下面是一个具体的例子展示如何创建带有合并单元格效果的工作簿并最终下载为 `.xlsx` 文件:
```javascript
import XLSX from 'xlsx-js-style';
// 准备工作区 (Workbook)
const wb = {
SheetNames: [],
Sheets: {},
};
// 构建 sheet 数据
let data = [
['姓名', '年龄'],
['张三', 20],
['李四', 25],
];
// 添加自定义的合并规则
data.push(['总分']);
for(let i=0; i<3;i++){
data[data.length-1].push(''); // 合并后的空白填充
}
// 创建 worksheet 并应用样式和合并逻辑
var ws = XLSX.utils.aoa_to_sheet(data);
ws['!merges'] = [{ s: { r: 2, c: 0 }, e: { r: 2, c: 2 } }];
// 将worksheet 加入 workbook 中
wb.SheetNames.push('Sheet1');
wb.Sheets['Sheet1'] = ws;
// 导出文件
XLSX.writeFile(wb, "example.xlsx");
```
这段代码首先构建了一个基础的工作薄对象 (`wb`) 和一个包含两列标题以及几条记录的一维数组形式的数据集 (`data`) 。接着,添加了一行用于表示“总分”的标签,并故意留出了额外的空间以便后续能够正确地进行跨多列的合并处理。最后一步则是调用了 `utils.aoa_to_sheet()` 方法把原始数据转换成了适用于写入 Excel 文档的标准格式,并指定了特定区域内需要合并的起始(`s`)与结束(`e`)坐标点。整个过程结束后即实现了预期的效果——成功生成了一份具有合并单元格特性的电子表格文档[^5]。
阅读全文
相关推荐


















