纯前端实现数据导出excel文件

一  安装依赖

　　npm install -S file-saver xlsx

　　npm install -D script-loader

二 新建文件夹

 

 在网上百度引入即可

三 在main.js中引入

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

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

（pass：注意路径和文件名是否一致）

四 webpack.base.conf.js做如下修改：

resolve: {
    extensions: [\'.js\', \'.vue\', \'.json\'],
    alias: {
      \'vue$\': \'vue/dist/vue.esm.js\',
      \'@\': resolve(\'src\'),
      \'scss_vars\': \'@/styles/vars.scss\',
      \'excel\': path.resolve(__dirname, \'../src/excel\'),//新增加一行***
    }
  },

五 项目中使用

html：

 <el-button type="primary" @click="outexcel">导出Excel</el-button>

js：

    outexcel(){
      this.$confirm(\'此操作将导出excel文件, 是否继续?\', \'提示\', {
          confirmButtonText: \'确定\',
          cancelButtonText: \'取消\',
          type: \'warning\'
      }).then(() => {
          // this.excelData = this.canhuiList //你要导出的数据list。
          console.log(this.canhuiList)
          this.export2Excel()
      }).catch(() => {
      
      });
    },

    formatJson(filterVal, jsonData) {
　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel() {
　　　require.ensure([], () => {
　　　　const { export_json_to_excel } = require(\'../../vendor/Export2Excel\');
　　　　const tHeader = [\'会议标题\',\'大区中心\',\'客户名称\',\'姓名\',\'设备型号\',\'版本\',\'加入时间\',\'离开时间\',\'参会时长\',];
　　　　const filterVal = [\'meetingTitle\', \'areaName\', \'customName\', \'name\', \'deviceModel\', \'deviceAppVersion\',\'joinTime\',\'leaveTime\',\'joinTimeLong\', ];
　　　　const list = this.canhuiList;
　　　　const data = this.formatJson(filterVal, list);
        const autoWidth=true
　　　　export_json_to_excel(tHeader, data, \'参会记录Excel\');
　　　})
　  },

pass：list是你的数据数组，

tHeader 是你的表头

filterVal 是你对应的参数名（一一对应）

祝你好运QWQ