Vue +springboot 导出excel

两种实现方式：1.后台返回json，前台通过xlsx解析，然后生成excel文件；2.后台返回文件流；

第一种方式：贴出前台代码，后台的就不需要了吧，就是很简单的json数据；

 //导出
      exportTable() {
        var jsono = [{
          "应用名字" : "appname",
          "关键字" : "keyword",
          
         
        }]
        var keyMap = []; 
        var valueMap = [];
        var list1 = []
        for (var k in jsono[0]) {
            keyMap.push(k)
            valueMap.push(jsono[0][k])
        }
        for (var i=0;i<this.dataList.length;i++) {      
            list1[i] = []
            
            for (var j in valueMap) {
              
                list1[i][keyMap[j]]= this.dataList[i][valueMap[j]]   
                     
            }          
        }
        var ws = xlsx.utils.json_to_sheet(list1);
        var wb = xlsx.utils.book_new();
        xlsx.utils.book_append_sheet(wb, ws, "People");//sheet名称
        let out = xlsx.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          fileSaver.saveAs(
            new Blob([out], {
              type: "application/octet-stream"
            }),
            "列表.xlsx"
          );
        } catch (e) {
          // 错误处理方式
        }
        return out;
      },

第二种：同样，先贴出前台代码：

// 导出方法

exportTable(){

this.$http({

url: this.$http.adornUrl('/*/getExportData'),//获取文件流的接口路径

method: 'post',

data: {//请求参数

"id":"12"

},

responseType: 'blob' // 表明返回服务器返回的数据类型 很重要！！

}).then((res) => {

//获取当前日期，作为导出的文件名

var myDate = new Date();

var year = myDate.getFullYear();

var month = myDate.getMonth() + 1;

var strDate = myDate.getDate();

if (month >= 1 && month <= 9) {

month = "0" + month;

}

if (strDate >= 0 && strDate <= 9) {

strDate = "0" + strDate;

}

var mytime = year + month + strDate;

//将文件流转成blob形式

const blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});

let filename = mytime+'.xls';

//创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件

const elink = document.createElement('a');

elink.download = filename;

elink.style.display = 'none';

elink.href = URL.createObjectURL(blob);

document.body.appendChild(elink);

elink.click();

URL.revokeObjectURL(elink.href); // 释放URL 对象

document.body.removeChild(elink);

}).catch(error => {

this.$message.error('导出失败');

// console.log(error)

})

},

后台代码我不想贴了，因为用的jxl的技术，很老，我就只贴出遇到的问题跟解决方式吧：
（1）第一个问题：前台不识别文件流

responseType: 'blob' // 表明返回服务器返回的数据类型 很重要！！

这个一定要加在请求头里面，否则识别不了文件流

（2）第二个问题：跨域

因为是前后端分离，IP跟端口肯定不一样，浏览器不接受这种跨域返回的文件流，所以需要在response的header里面加一条属性：

response.setHeader("Access-Control-Allow-Origin", "http://***:8001");//解决跨域

网上有很多说放个*就行，像这样：

response.setHeader("Access-Control-Allow-Origin", "*");//解决跨域

但是我这试了不行，所以就把前台的具体IP跟端口写进去了，反正是管用。