xlsx.js 表格的导出与导入

1.xlsx简介

• 通俗的说，xlsx这个插件可以把html中的table元素或者json数据转换成表格后进行导出
• 也可以解析表格文件，将其转换成json格式的数据
• 引入插件：只做参考，推荐上官方文档下载最新版官方文档

<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>

2.基本概念

一个excel文件就是一个book，一个book中又包含一个或多个sheet，以下方法均由XLSX.utils对象调用

常用方法	参数	说明
book_new	-	创建一个空的book
table_to_book	table元素（dom）	将table元素转换成 book
table_to_sheet	table元素（dom）	将table元素转换成 sheet
json_to_sheet	json数据（数组）	将json数据转换成 sheet
book_append_sheet	参数1：book对象，参数2：sheet对象，参数3：sheet名称	将sheet添加到book中
writeFile	参数1：book对象，参数2：导出的文件名称	导出表格文件

3.JSON转表格

• json数据：支持一维数组和二维数组

//导出后已key作为列名称
var print_data = [
        {'id':1,'name':'张三','age':20},
        {'id':2,'name':'李四','age':25},
        {'id':3,'name':'王五','age':30}
    ]
//导出后已下标作为列名称
var print_data2 = [
    [1,'张三',20],
    [2,'李四',25],
    [3,'王五',30]
]

• 导出：导出命令执行后，弹出下载确认，供用户操作

 exportEvent () {
    // 创建一个新sheet
    const new_sheet = XLSX.utils.json_to_sheet(print_data)
    // 设置每列的列宽（可选），10代表10个字符，注意中文占2个字符
    new_sheet['!cols'] = [
        { wch: 10 },
        { wch: 30 },
        { wch: 25 }
    ]
    // 新建book
    const new_book = XLSX.utils.book_new()
    // 将 sheet 添加到 book 中
    XLSX.utils.book_append_sheet(new_book, new_sheet, '人员名单')
    // 导出excel文件
    XLSX.writeFile(new_book, '人员名单.xlsx')
}   

• 表头标题替换：实际使用过程中，表格列标题可能需要的是中文标题，而是不下标或者是英文，可以通过特定方法，将json数据的key进行转换后在执行导出

//将json数据的key替换成目标中文
replaceKeyForTableData(tableData = [],mapData = {}){
        //要返回的最终数据
        var result = []
        //循环数组的每行数据
        tableData.forEach(row=>{
            //新的行数据
            var new_row = {}
            //循环每个键值
            Object.keys(row).forEach(key=>{
                //判断这个可以是否 可以在映色中找到对应的值 有则使用，无则使用原来的key
                var new_key = mapData[key]? mapData[key]:key
                //为新的行数据添加键值对
                new_row[new_key] = row[key]
            })
            //新的行添加到表格数据中
            result.push(new_row)
        })
        return result
    }

var mapData = {
        id: "序号",
        name:"姓名",
        age:"年龄"
    }
//执行替换
var print_data = replaceKeyForTableData(print_data,mapData)

//后续打印逻辑省略

4.HTML-table转表格

• 导出原生表格：将table元素传入即可导出

//获取dom元素
var table_dom = document.querySelector('table')
//将dom转换为book
const new_book = XLSX.utils.table_to_book(table_dom)
// 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
XLSX.writeFile(new_book, '数据导出.xlsx')

• 导出插件生成的表格：插件生成的表格因为兼容一些功能，最终渲染的时候其实是2个table元素，为了能将表格完整的导出（thead+body），需要手动拼接dom

//这里以vxe-table为例
exportEvent () {
    // 创建新的table元素
    var print_table_dom = document.createElement('table')
    // copy一份thead
    var print_table_dom_thead = this.$refs.p_table.$el.querySelector('.vxe-table--header-wrapper > .vxe-table--header thead').cloneNode(true)
    // copy一份tbody
    var print_table_body = this.$refs.p_table.$el.querySelector('.vxe-table--body-wrapper > .vxe-table--body tbody').cloneNode(true)
    // 将thead和tbody添加到 目标table中
    print_table_dom.appendChild(print_table_dom_thead)
    print_table_dom.appendChild(print_table_body)
    // 生成 book
    const new_sheet = XLSX.utils.table_to_book(print_table_dom)
    // 导出excel
    XLSX.writeFile(new_sheet, '数据导出.xlsx')
},

• 数字格式的问题：excel时，以0开头的数据，其开头0被忽略，如001234导出到excel后变为了1234，只需要将dom转换为book的时候，传入第二个参数即可

//将dom转换为book,传入第二个参数{raw:true}
const new_book = XLSX.utils.table_to_book(table_dom,{raw:true})

5.jsonToxlsx封装

• 用于导出表格数据(json)，在xlsl.js基础上封装了列宽自适应，表头标题替换功能，代码已上传至gitee，地址
• 表格数据格式

var tableData = [
    {id: 1, name:"张三",age:20},{id:2, name:"李四",age:20},{id:3, name:"王五",age:20}
]

• 表头映射数据（可选）

var tHeadMap = {
    id: "序号", name: "姓名", age: "年龄"
}

• 执行导出

jsonToxlsx(tableData, tHeadMap)

6.xlsxTojson封装

• 文件读取：借助文件域+H5的FileReader对文件进行读取
• 一次转码：使用XLSX对FileReader读取到的数据转换成bookData
• 二次转码：再借助XLSX的方法将上个步骤的数据转换成csvData
• 三次转码：自行将csvData转换为json数据，已针对常见的表格结构做了转换规则，代码已上传至gitee，地址
• 引入插件

<script src="./xlsx.full.min.js"></script>
<script src="./xlsxTojson.js"></script>

• 参数说明：xlsxTojson(file, options)

参数	说明
file	使用文件域选择的文件
options.Thead	是否带表头，默认否
options.TheadConfig	自定义表头配置

• 调用方式

//文件不带表头
    var fileNode = document.querySelector("#file")
    fileNode.addEventListener('change',function(){
        //当前文件
        var file = fileNode.files[0]
        //调用方法
        xlsxTojson(file)
    })

• 文件带表头(英文)

xlsxTojson(file, {
    Thead: true,//带表头
})

• 文件带表头（中文）

xlsxTojson(file, {
    Thead: true,//带表头
    TheadConfig: {
        id: "序号",
        name: "姓名",
        age: "年龄"
     },//表头自定义配置
})