vue Export2Excel 实现excel导出

vue Export2Excel 导出excel方法

• vue 安装相关的依赖

  npm install -S file-saver
  npm install -S xlsx
  npm install -D script-loader
  

• 导入两个需要的js

• 这里我们不对后台的数据进行获取，直接用假数据，直接调接口同理

  我们将数据放到tableData中

  data () {
      return {
        tableData: [
          {'index':'0',"nickName": "快乐天使", "name": "小a","sex": "1"},
          {'index':'1',"nickName": "爷傲奈我何", "name": "小b","sex": "1"},
          {'index':'2',"nickName": "应急食品", "name": "小c","sex": "0"}
        ]
      }
    }
  

• 重点的vue部分

  //导出的方法
  exportExcel() {
    require.ensure([], () => {
      const { export_json_to_excel } = require('../excel/Export2Excel');
      const tHeader = ['序号', '昵称', '姓名','性别'];
      // 上面设置Excel的表格第一行的标题
      const filterVal = ['index', 'nickName', 'name','sex'];
      // 上面的index、nickName、name是tableData里对象的属性
      const list = this.tableData;  //把data里的tableData存到list
        //这里如果我们有需要可以在这里对数据进行循环处理 例如
         /*    list.forEach(element => {
                 if(element .sex==1){
                 element.sex="男";
                 }else{
                  element.sex="女";
                 }
  
              });*/
      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 Loader] ReferenceError: require is not defined

• TypeError: _this13.formatJson is not a function 忘记formatJson 方法了

• Uncaught (in promise) TypeError: _this13.formatJson is not a function 忘记formatJson 方法了

• vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "ReferenceError: request is not defined 需要import request from “@/utils/request”;

• ReferenceError: request is not defined 需要import request from “@/utils/request”;

首先vue中的 formatJson方法是必不可少的

然后Export2Excel2.js文件中require(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’) 也可以解决第一个问题

quire(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’) 也可以解决第一个问题

报错这个要检查自己是否引入了request
import request from “@/utils/request”;