VUE 导出excel表格

安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

安装成功后，添加两个js文件：Blob.js、Export2Excel.js

两个文件的地址：https://download.csdn.net/download/qq_20097569/10675562

将两个文件放在自己项目静态文件目录下，我给它取名为：excel

完成如上图后，我们可以封装导出excel的方法：

/**
* @param {Array} filterVal 表头value
* @param {Object} jsonData 表格数据
*/
formatJson (filterVal, jsonData) {
     return jsonData.map(val => filterVal.map(obj => val[obj]))
},
/**
* 导出excel表格
* @param {Array} tHeader 表头label
* @param {Array} filterVal 表头value
* @param {Object} list 表格数据
* @param {String} name excel文件名字
*/
exportExcel (tHeader, filterVal, list, name) {
     let _this = this
     require.ensure([], () => {
          let { export_json_to_excel } = require('@/static/excel/Export2Excel')
          let data = _this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, name)
    })
 }

接下来我们就可以实现代码啦

exportExcel() {
    // 获取表头数据
    let tableLabel = [
        { label: '姓名', value: 'name' },
        { label: '性别', value: 'sex' },
        { label: '年龄', value: 'age' }
    ]
    let tableData = [
        { name: '张三', sex: '', age: 18 },   
        { name: '李四', sex: '', age: 18 },   
     ]
     let tHeader = tableLabel.map(obj => obj.label)
     let filterVal = tableLabel.map(obj => obj.value)
     // 调用封装的公用方法
     this.$untils.exportExcel(tHeader, filterVal, tableData, '用户信息')
}

完成~~~！！！