在Vue中，将数据导出成excel,合并单元格

╰+攻爆jí腚メ 2023-07-01 08:49 22阅读 0赞

前段时间接到一个做报表的项目，需要将数据导出成excel表格，表格模板中有很多表格是需要合并的，之前没有这方面的经验，也为难了好久，后来终于发现一个好用的js插件，完全能够实现我需要的功能，一块分享给大家；

由[SheetJS][]出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

官方github：[https://github.com/SheetJS/js-xlsx][https_github.com_SheetJS_js-xlsx]

demo在线演示地址：[http://demo.haoji.me/2017/02/08-js-xlsx/][http_demo.haoji.me_2017_02_08-js-xlsx]

官网演示地址：[https://oss.sheetjs.com/sheetjs/][https_oss.sheetjs.com_sheetjs]

下面说说具体怎么使用的

在Vue项目中使用npm安装

npm install xlsx

之后在需要使用的组件内引用，当然也可以全局引入

import XLSX from 'xlsx'

## 利用官方提供的工具类实现下载功能 ##

官方已经提供好了现成的工具类给我们使用，主要包括：

*  `aoa_to_sheet`: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；
 *  `table_to_sheet`: 将一个`table dom`直接转成sheet，会自动识别`colspan`和`rowspan`并将其转成对应的单元格合并；
 *  `json_to_sheet`: 将一个由对象组成的数组转成sheet；

`aoa_to_sheet`示例：

// 需要导出的数据
    var aoa = [
        ['姓名', '性别', '年龄', '注册时间'],
        ['张三', '男', 18, new Date()],
        ['李四', '女', 22, new Date()]
    ];
    
    // 导出的表格名称
    const filename ='导出表格.xlsx'
    // Excel第一个sheet的名称
    const ws_name = 'Sheet1'
    const wb = XLSX.utils.book_new()
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄
    XLSX.writeFile(wb, filename) // 导出Excel

`table_to_sheet`就更简单了，直接`XLSX.utils.table_to_sheet($('table')[0])`即可；

## 处理单元格合并 ##

假设我们要生成如下格式的excel文件，其中`A1-C1`进行单元格合并：

![format_png][]

实现代码如下：

需要注意的地方就是被合并的单元格要用`null`预留出位置，否则后面的内容（本例中是第四列`其它信息`）会被覆盖。

## 设置样式(居中，文字大小颜色,背景色...) ##

### 安装xlsx-style ###

好像只有npm安装,github我没找到地址

npm install xlsx-style

之后就可以直接使用了

注意，设置单元格列宽要从第一行开始设置

我暂时也只探索到这里，后面如果有更加复杂的需求，可以继续深入探索

[SheetJS]: https://links.jianshu.com/go?to=https%3A%2F%2Fsheetjs.com%2F
[https_github.com_SheetJS_js-xlsx]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FSheetJS%2Fjs-xlsx
[http_demo.haoji.me_2017_02_08-js-xlsx]: https://links.jianshu.com/go?to=http%3A%2F%2Fdemo.haoji.me%2F2017%2F02%2F08-js-xlsx%2F
[https_oss.sheetjs.com_sheetjs]: https://oss.sheetjs.com/sheetjs/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMzUyNzk3LzIwMTgwNy8zNTI3OTctMjAxODA3MDYxMDEyMjk3OTItNzE0NDI4NzM0LnBuZw?x-oss-process=image/format,png