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

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

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

官方github：https://github.com/SheetJS/js-xlsx

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

官网演示地址：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进行单元格合并：

实现代码如下： 

var aoa = [
    ['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null
    ['姓名', '性别', '年龄', '注册时间'],
    ['张三', '男', 18, new Date()],
    ['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = [
    // 设置A1-C1的单元格合并
    {s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];

const filename='导出合并单元格的表格.xlsx'
// Excel第一个sheet的名称
const ws_name = 'Sheet1'
const wb = XLSX.utils.book_new()
const ws = XLSX.utils.aoa_to_sheet(aoa)
ws['!merges'] = mergeArr
XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄
XLSX.writeFile(wb, filename) // 导出Excel

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

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

安装xlsx-style

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

npm install xlsx-style

之后就可以直接使用了

const aoa = [
    ['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null
    ['姓名', '性别', '年龄', '注册时间'],
    ['张三', '男', 18, new Date()],
    ['李四', '女', 22, new Date()]
];
const ws_name = 'Sheet1'
const wb = XLSX.utils.book_new()
const ws = XLSX.utils.aoa_to_sheet(aoa)
ws['!merges'] = [
    // 设置A1-C1的单元格合并
    {s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
//这个就是修改格式的代码
ws["A5"].s = {
            font: {
                sz: 13,
                bold: true,
                color: {
                    rgb: "FFFFAA00"
                }
            },
            alignment: {
                horizontal: "center",
                vertical: "center",
                wrap_text: true
            }
        };
//控制单元格宽度
ws["!cols"] = [{
            wpx: 70
        }, {
            wpx: 70
        }, {
            wpx: 70
        }, {
            wpx: 70
        }, {
            wpx: 150
        }, {
            wpx: 120
        }]; //单元格列宽
const filename='导出单元格带样式的表格.xlsx'
// Excel第一个sheet的名称
ws['!merges'] = mergeArr
XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄
XLSX.writeFile(wb, filename) // 导出Excel

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

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