vue excel导出组件

第一步:安装依赖包:

npm install -S file-saver xlsx 

npm install -D script-loader

#第二步

导入Blob.js 和Export2Excel.js两个文件,在src目录下创建excel文件,里面放入Blob.js 和Export2Excel.js两个文件,
Blob.js 和Export2Excel.js两个文件地址: 文件提取码:kk8a
Blob.js 和Export2Excel.js下载地址

github  地址 : github ​​​​​​​

在main.js 引入:

//excel 组件
import  './excel/Blob.js'
import  './excel/Export2Excel.js'

 第三步: 使用

<template>
  <div class="hello">
           <button class="tap"  @click="export2Excel">导出表格</button>
  </div>
</template>


<script>
export default {
 data () {
    return {
      tableData: [
       {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    export2Excel() {
      require.ensure([], () => {
 const { export_json_to_excel } = require('../excel/Export2Excel');
          const tHeader = ['姓名', '日期', '地址'];  // 设置Excel的表格第一行的标题
          const filterVal = ['name', 'date', 'address'];  // index、nickName、name是tableData里对象的属性
          const list = this.tableData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '导出文件名');  //导出Excel 文件名
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}

测试 导出 ok