vue中Excel文件导出

安装依赖

npm install -S file-saver

npm install -S xlsx

npm install -D script-loader

格式化表格数据

文件：utils/tool

/**
 *  格式数据
 *  @filterVal  格式头
 *  @tableData  用来格式的表格数据
 */
export function formatJson(filterVal, tableData) {
  return tableData.map(v => {
    return filterVal.map(j => {
      return v[j]
    })
  })
}

下载 Export2Excel.js 文件

Export2Excel.js (复制Export2Excel.js中代码，保存到自己项目文件中)

在项目中使用

1. 引入 export_json_to_excel 方法 (使用相对路径)

import { export_json_to_excel } from '../../../js/vendor/Export2Excel'


2. 格式化表格数据
export_json_to_excel 方法中需要用到的数据和我们在网页中渲染到table上的数据不同，需要格式化

/**
 *  格式数据
 *  @filterVal  格式头
 *  @tableData  用来格式的表格数据
 */
export function formatJson(filterVal, tableData) {
  return tableData.map(v => {
    return filterVal.map(j => {
      return v[j]
    })
  })
}

调用 export_json_to_excel 方法

import { formatJson } from 'utils/tool'
import { export_json_to_excel } from '../../../js/vendor/Export2Excel'

// 导出按钮点击事件函数
handleExport() {
    const tHeader = [ '物品名称','物品型号',  '序列号','状态' ]
    const filterVal = ['name', 'model', 'serial','status']
    const filename = '物品表单' // 自定义excel文件名
    const data = this.formatJson(filterVal, this.tableData) // this.tableData 表格数据
    export_json_to_excel({
        header: tHeader,
        data,
        filename
    })
},