鱼塘码农

菜鸟学习记录
鱼海无涯

Vue实现前端导出Excel

对于一些量少,简单的数据导出,前端可以直接处理,百度了一番发现很简单。
1、使用npm安装依赖

npm install -S file-saver xlsx  //这里file-saver和xlsx是两个依赖
npm install -D script-loader

2、添加两个JS文件到目录里
我这个神奇的博客不支持上传js格式的文件,我改成txt了
Export2Excel.txt
Blob.txt
QQ截图20210630094050.png
3.在main.js中引用

import Blob from './assets/js/exportExcle/Blob.js'
import Export2Excel from './assets/js/exportExcle/Export2Excel.js'

4、修改webpack.base.conf.js文件中resolve的alias:

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'exportExcle':path.resolve(__dirname,'../src/assets/js/exportExcle'),//这里是新增的,路径要与第三步中放js文件的路径一致,exportExcle改成放js文件的文件夹
    }
  },

5.页面中使用

<Button type="success" @click='exportClick()'>导出当前数据</Button>

methods:

exportClick(){
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/assets/js/exportExcle/Export2Excel');
        const tHeader = ['编号','姓名','地址','电话'];//Excel的表头
        const filterVal = ['id','name','address','tel'];//数据对应的字段
        const list =[  //这里是data数组,可以使用后台接口数据
           {id:'1',name:'张三',address:'北京',tel:'123'},
           {id:'1',name:'李四',address:'上海',tel:'123'},
           {id:'1',name:'王五',address:'广州',tel:'123'},
           {id:'1',name:'马六',address:'深圳',tel:'123'},
        ]
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '文件名称');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

到这里就可以实现导出excel了,还可以实现前端导入excel的功能,等后面用到了再写

文章内容可能来自网络,纯为学习使用,若有侵权,请联系我删除 | 当前页面:鱼塘码农 » Vue实现前端导出Excel

评论