普歌-vue中导出Excel表格

安装依赖

 npm install -S file-saver

 npm install -S xlsx

 npm install -D script-loader

下载所需js文件

• 在src目录下创建vendor文件夹,在该目录下放入Blob.js和Export2Excel.js ----下载
• 修改Export2Excel.js的路径

require('script-loader! ../../../node_modules/file-saver/src/FileSaver');
require('./Blob');
require('script-loader! ../../../node_modules/xlsx/dist/xlsx.core.min');

• 将文件挂载到全局

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

页面中的使用

1.创建一个点击事件

<template>
  <el-button @click="downloadExcel">导出</el-button>
</template>

2.自己先随便写一个数据(数据根据下面数据所写)

data(){
  return{
   list:[
          author:"***",
          display_time:"10000",
          id:"12",
          pageviews:"12",
          status:"啥也不是",
          title:"****"
      ]
    }
}

3.将数据写入excel中

     //数据写入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]))
        },

4.导出表格

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

---

giao~ giao ~giao小伙伴们是不是觉得很简单啊,是不是该给猫哥一个赞呢,哇嘎嘎

---

相关推荐:橘子猫哥的《普歌-使用OAuth2.0实现第三方登陆(前端 vue)》

---

作者：橘子猫哥
出处/源自：橘子猫哥《普歌-vue中导出Excel表格》

本文版权归作者和优快云共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。