首页 > 其他 > 详细

vue---Excel表格导出

时间:2018-09-20 15:12:23      阅读:184      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

一、安装依赖

     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表格导出

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!