在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,会自动识别colspanrowspan并将其转成对应的单元格合并;
  • 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

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

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页