vue xlsx.js 插件导出excel 及 单元格设置超连

1. 引入xlsx

npm install --save xlsx

2.进行一次封装

在带 scr/common 文件夹下创建 export_excel.js
里面具体代码

import fs from 'file-saver'
import XLSX from 'xlsx'
export default (json, fields, filename = '导出数据.xlsx',addTargetArr = [],mergesArr = []) => {
    json.forEach(item => {
        for (let i in item) {
            if (fields.hasOwnProperty(i)) {
                item[fields[i]] = item[i];
            }
            delete item[i]; //删除原先的对象属性
        }
    })
    let sheetName = filename //excel的文件名称
    let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
    let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
    //插入超链接
    if (addTargetArr.length) {
        addTargetArr.forEach(sonItem =>{
            ws[sonItem.key].l = sonItem.value
        })
    }
 //插入合并单元格
    if (mergesArr.length) {
        ws["!merges"] = mergesArr
    }
    wb.SheetNames.push(sheetName)
    wb.Sheets[sheetName] = ws
    const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式
    let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //写入的样式
    let wbout = XLSX.write(wb, wopts)
    let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}
const s2ab = s => {
    if (typeof ArrayBuffer !== 'undefined') {
        var buf = new ArrayBuffer(s.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
    } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
}

因为xlsx.js 可以设置的添加超链接的格式是

    ws['A1'].l = {Target:'httpL://www.baidu.com',Tooltip: "为A1 单元格添加百度一下的超链接"}

其中 addTargetArr 中的格式

    [{key:'A1',value:{Target:'httpL://www.baidu.com',Tooltip: "为A1 单元格添加百度一下的超链接"}},{key:'B1',value:{Target:'httpL://www.baidu.com',Tooltip: "为B1 单元格添加百度一下的超链接"}}]

mergesArr 的样式是

    [{ s: { c: 9, r: 0 }, e: { c: 11, r: 0 } }]