vue 导出表格到xlsx中

首先下载一个依赖包

npm install xlsx --save 

然后在导出按钮绑定事件中传入需要导出的数据，这里我是将element-ui 组件表格绑定的数据直接导出

<el-button @click="downloadFile(threatPerceptionData)">导出</el-button>

在导出按钮标签上添加一个a标签

<a id="downlink"></a>

data中绑定数据

outFile: '',  // 导出文件el

导出按钮事件中

// 导出表格功能
downloadFile(rs) {
     
	let data = [{
     }]
	or (let k in rs[0]) {
     
    data[0][k] = k
    }
    data = data.concat(rs)
    this.downloadExl(data, '告警信息')
},

将这两个方法也写入在methods中

downloadExl(json, downName, type) {
     
    let keyMap = [] // 获取键
    for (let k in json[0]) {
     
        keyMap.push(k)
    }
    console.info('keyMap', keyMap, json)
    let tmpdata = [] // 用来保存转换好的json
    json.map((v, i) => keyMap.map((k, j) => Object.assign({
     }, {
     
        v: v[k],
        position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
     
        tmpdata[v.position] = {
     
            v: v.v
        }
    })
    let outputPos = Object.keys(tmpdata)  // 设置区域,比如表格从A1到D10
    let tmpWB = {
     
        SheetNames: ['mySheet'], // 保存的表标题
        Sheets: {
     
            'mySheet': Object.assign({
     },
                tmpdata, // 内容
                {
     
                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
                })
        }
    }
    let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
        {
     bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 这里的数据是用来定义导出的格式类型
    ))], {
     
        type: ''
    })  // 创建二进制对象写入转换好的字节流
    var href = URL.createObjectURL(tmpDown)  // 创建对象超链接
    this.outFile.download = downName + '.xlsx'  // 下载名称
    this.outFile.href = href  // 绑定a标签
    this.outFile.click()  // 模拟点击实现下载
    setTimeout(function () {
       // 延时释放
        URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL
    }, 100)
},

s2ab (s) {
      // 字符串转字符流
    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
},

这样即可实现导出到xlsl表格中并可以保存文件