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

vue---Excel表格导出

时间:2018-09-20 16:07:16      阅读:841      评论:0      收藏:0      [点我收藏+]

标签:this   xls   获取   col   elb   nbsp   rip   excel表格   创建   

技术分享图片

 

一、安装依赖

     npm install file-saver --save

     npm install xlsx --save

     npm install script-loader --save-dev

 

二、下载插件

  到 https://pan.baidu.com/s/1DiIGxik9HaanMQwx2ICGAg 下载插件(密码:fkkg)

 

 

三、在src目录下创建一个vendor文件,把下载的插件复制进去

技术分享图片

 

 

四、修改build/webpack.base.conf.js

  ‘vendor‘: path.resolve(__dirname, ‘../src/vendor‘)

技术分享图片

 

五、在methods方法里

export_Excel() {
        var listStudent = null;
        this.axios.get(‘api/exportStudentList‘).then((response) => {
          listStudent = response.data.list;
        })
                //↑ 是获取数据
                
        this.$confirm(‘确定要导出表格数据么?‘, ‘提示‘, {
          confirmButtonText: ‘确定‘,
          cancelButtonText: ‘取消‘,
          type: ‘warning‘
        }).then(() => {
          require.ensure([], () => {
            const {
              export_json_to_excel
            } = require(‘../vendor/Export2Excel‘)

            const tHeader = [‘ID‘, ‘姓名‘, ‘年龄‘, ‘性别‘, ‘生日‘]
            const filterVal = [‘id‘, ‘name‘, ‘age‘, ‘sex‘, ‘birthday‘]
            const list = listStudent
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, ‘商品管理列表‘)
          })
        }).catch(() => {})
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }

 

 导出之后长这样

技术分享图片

 

 

 

  

 

vue---Excel表格导出

标签:this   xls   获取   col   elb   nbsp   rip   excel表格   创建   

原文地址:https://www.cnblogs.com/zyulike/p/9680840.html

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