vue-cli实现导出excel

1.安装3个依赖包

 npm install -S file-saver

 npm install -S xlsx

 npm install -D script-loader

2.在src目录下创建文件夹vendor，里面放入Blob.js和Export2Excel.js两个JS文件
点击超链接下载文件

3.进入Export2Excel.js文件修改文件路径（这里不好说直接上图）

4.在main.js里引入这两个文件

import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'

5.在页面里使用

  data() {
    return {
    //已经把请求到的数据放到list里了
      list: null,
    }
  },

这里可以写一个按钮 事件就是downloadExcel()

    // 导出表格
    downloadExcel(){
       this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.list = this.list //你要导出的数据list
            this.export2Excel()
          }).catch(() => {
          })
    },

         //数据写入excel
        export2Excel() {
          var that = this;
          require.ensure([], () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel'); //注意这里的路径
            // 导出的表头名信息
            const tHeader = ['姓名','时间','id','综合访问量',"地位","标题"]; 
            const filterVal = ['author','display_time', 'id', 'pageviews','status','title']; // 导出的表头字段名，需要导出表格字段名
            const list = that.list;
            const data = that.formatJson(filterVal, list);
 
            export_json_to_excel(tHeader, data, '表格信息excel');// 导出的表格名称，根据需要自己命名
          })
        },
            //格式转换，直接复制即可
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },

效果图

在这里写这三个方法：注意文件路径，就可以导出成功啦
如果这篇文章对你有帮助，记得点个赞哦！