VUE2.0通过后端json数据导出.xlsx文件 2018-07-16

不废话，上小白代码

1. 安装相关依赖

主要是两个依赖:(xlsx 和 file-saver)
npm install --save xlsx file-saver

github上详细的参考地址
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

2. 组件里头引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

模板引用示例

3.在对应组件里边methods里边写一个方法

      outInfoList(){
        
        let _this = this;
        _this.$http
          .post("/index/api/getWageList", {
            search: JSON.stringify(_this.searchList),
            out:1
          })
          .then(function (response) {
            //console.log(response.data.data);
            const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
            wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(response.data.data);//通过json_to_sheet转成单页(Sheet)数据
            const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });

            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), response.data.filename+'.xlsx');
            } catch (e)
            {
                if (typeof console !== 'undefined')
                    console.log(e, wbout)
            }
            return wbout
          });
      }

4.点击导出按钮执行 outInfoList的方法即可 。

      
        导出Excle
      

参考

https://www.jianshu.com/p/6edf74f65fc1
https://www.jianshu.com/p/044c183edf42