vue+element 导出Excel

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

vue+element 如何导出Excel

一、步骤

1.引入依赖

代码如下（示例）：

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

2.html代码

        <el-button type="text" icon="el-icon-download" @click="onDownload">属性值模版下载</el-button>
      </el-col>

3.methods里的方法

onDownload() {
      modelExcelExport().then(res => {
        const list = res.data/* 后台表查出来的集合数据 */
        import('@/vendor/Export2Excel').then(excel => {
         /* EXcel表里的列的标题 */
          const tHeader = ['商品ID', '物料编号', '物料质量', '物料公差', '物料账套', ' 价格（不含税）', '币种', '账套']
            /* 后台表查出来的字段,数量不用与Excel列数相等 */
          const filterVal = ['id', 'materialCode', 'quality', 'tolerance', 'dataareaid']
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '商品价格模板',
            autoWidth: this.autoWidth,
            bookType: this.bookType
          })
          this.downloadLoading = false
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(item => {
        if (item === 'vs') {
          return v['kill'] + '-' + v['death'] + '-' + v['assist']
        } else {
          return v[item]
        }
      }))
    },