纯前端实现数据导出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

原文地址：https://www.cnblogs.com/cb1490838281/p/11971223.html