vue excal 表格导出

案例以vue 和element 为例
element 按照 正常的使用方法 安装，使用
具体看导出步骤：
1.安装依赖项 ：
npm i file-saver xlsx script-loader -D

2.下载 所需的js 文件
下载链接：https://download.csdn.net/download/qq_43101321/11674316 //这个需要积分
下载链接：https://pan.baidu.com/s/1bFqQJEGPaKECoxEpHcHR8A // 免费
提取码：3iqo

在 src 下创建目录，并将下方的js文件放到该目录

3.可以封装一个导出的组件 （方便复用）
新建一个导出组件：

<template title="导出表格">
  <div>
    <el-button
      :type="type"
      :list="list"
      :t-header="tHeader"
      :t-value="tValue"
      @click="handleOutput"
    >{{ text }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'Educe',
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    tHeader: {
      type: Array,
      default: function() {
        return []
      }
    },
    tValue: {
      type: Array,
      default: function() {
        return []
      }
    },
    text: {
      type: String,
      default: '导出'
    },
    type: {
      type: String,
      default: 'success'
    }
  },
  methods: {
    handleOutput() { // 导出
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('../vendor/Export2Excel')　　// 引入文件
        const tHeader = that.tHeader
        const filterVal = that.tValue// table表格中对应的属性名
        const list = that.list　　// 想要导出的数据
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '用户列表')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style scoped>

</style>

4.组件使用：
import Educe from ‘…/…/components/educe’ //你的组件名

tHeader ： 表头
tValue：字段值
list: 表格数据
eg:
tHeader : [‘日期’, ‘姓名’, ‘地址’],
tValue:[‘date’, ‘name’, ‘address’],

到此结束