vue导出数据excel
阅读原文时间:2021年05月25日阅读:1
  • 下载两个依赖

    npm install file-save xlsx

  • 创建两个文件 Blob.jsExport2Excel.js

    参考地址:文件地址

  • Export2Excel.js中修改引入地址,注意地址的路径,没有script-loader依赖的话就去 npm install script-loader -D下载该依赖

  • 在vue文件中使用

    引入文件:

    import {
    ​ export_json_to_excel
    } from '@/plugins/Export2Excel'

​ 点击按钮时导出文件

<a-button @click="exportExcel">导出</a-button>

exportExcel() {
    const excelHeader = this.columns.map(item => item.title)

    const keys = this.columns.map(item => item.dataIndex)

    const excelData = this.dataSource.map(item => keys.map(i => item[i] || ''))
    const excelName='人员信息表'
    export_json_to_excel(excelHeader, excelData, excelName)

},
  • 对于export_json_to_excel()中几个变量的解释

    excelHeader为导出数据的表头
    excelHeader=['年龄','性别','姓名']
    
    
    excelData为导出的数据
    excelData=[
        [16,'男','tom'],
        [17,'男','jim'],
        [12,'男','jon'],
        [16,'男','king']
    ]
    //数据的顺序与表头一致
    
    
    excelName:表的名字