文章详情 - 宏推科技

前段时间接到一个做报表的项目，需要将数据导出成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进行单元格合并：

New Image

实现代码如下：


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