码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-02 17:05:41      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:lda   rip   网上   val   load   好运   名称   lte   var   

一  安装依赖

  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

 

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

标签:lda   rip   网上   val   load   好运   名称   lte   var   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!