总体情况
最近在为新的用户中心迁移新的前端,架构方面已定好,前使用VUE,但是后台不变,我负责前端的一小部分,在下载附件这块遇到不少的问题,本来后端接口标准写法是没有问题的,但是以前的项目每个开发的人员都不太一样,所以会遇到各种问题,这里都一一解决,并通过实践上一个通用的写法。
后端
1、注解说明
这里要特别注意添加ResponseBody和不添加的区别。
添加了:Spring MVC将会处理方法的返回值,并使用合适的HttpMessageConverter将返回值写入输出流。这通常用于返回JSON或XML等数据格式。
不添加:表示返回的是页面,所以在浏览器上会返回404,是因为找不到页面。所以如果是前后端分离的话,基本上都是要加的。
@GetMapping("/parametertestone")//声明是get
@ResponseBody//Spring MVC将会处理方法的返回值,并使用合适的HttpMessageConverter将返回值写入输出流。这通常用于返回JSON或XML等数据格式。
public String parameterTestOne(
//
@RequestParam(name="number") String number,
String name) {
return number + " goodluck";
}
下面是带说明的详细代码:
package com.springstudy.controller;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.springstudy.domain.User;
import com.springstudy.service.IExcelService;
@Controller//标识是
@RequestMapping("/exceldemo")//整体标识
public class ExcelDemoController {
//解决一些问题
private final IExcelService excelService;
public ExcelDemoController(IExcelService excelService) {
this.excelService = excelService;
}
@PostMapping("/downloadexcel")
public void downloadExcel(HttpServletResponse response,@RequestBody User user) {
byte[] excelBytes = excelService.downloadExcelDemo(user);
OutputStream out = null;
try {
response.setContentType("application/vnd.ms-excel;");
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition", "inline");
response.setHeader("myfilename", "excelDownloadDemo.xlsx");
response.setHeader("flag", "1");
out = response.getOutputStream();
out.write(excelBytes);
} catch (Exception e) {
//e.printStackTrace();
}finally {
try {
if(out!=null) out.close();
} catch (Exception e) {
//e.printStackTrace();
//logger.error("print price error 6 : {}",e);
}
}
}
// localhost:8089/myspringdemo/exceldemo/parametertestone
@GetMapping("/parametertestone")//声明是get
@ResponseBody//Spring MVC将会处理方法的返回值,并使用合适的HttpMessageConverter将返回值写入输出流。这通常用于返回JSON或XML等数据格式。
public String parameterTestOne(
//name和value的效果一样.required默认为true,如果不是必须输入的则可设置为false
@RequestParam(name="number",required=false) String number,
String name) {
return number + " goodluck";
}
@PostMapping("/parametertesttwo")//声明是Post
@ResponseBody
public String parameterTestTwo(@RequestParam(name="number") String number) {
return number + " goodluck";
}
@PostMapping("/parametertestthree")
@ResponseBody
public String parameterTestThree(@RequestBody User user) {
return " goodluck";
}
}
前端代码:
downlaodExcel: function() {
var _this = this;
this.$message({
showClose: true,
message: 'Hello World!',
type: 'info'
});
var user = {
"aid": 1
};
this.$axios.post("/exceldemo/downloadexcel",user,{responseType: 'arraybuffer'}).then((res)=>{
//let ct = res.ContentType;
console.log(res);
var fileName = res.headers['myfilename'];
var contenttype = res.headers['content-type'];
console.log(fileName);
const blob = new Blob([res.data],{
type: contenttype
});
var body = document.getElementsByTagName('body')[0];
const a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob); //创建连接
body.appendChild(a); //添加a标签
a.click();
body.removeChild(a); //移除a标签
URL.revokeObjectURL(a.href); //关闭连接
}).catch(() => {
_this.$message({
type: 'info',
message: 'CheckOut Cancel1'
});
});
},
parameterTest: function() {
this.$axios.get("/exceldemo/parametertestone" + "?number=gl").then((res)=>{
this.$message({
type: 'info',
message: res.data
});
}).catch(() => {
this.$message({
type: 'info',
message: 'CheckOut Cancel1'
});
});
let data = {
number : "glkk"
};
this.$axios.post("/exceldemo/parametertesttwo?number=kkk" ).then((res)=>{
this.$message({
type: 'info',
message: res.data
});
}).catch(() => {
this.$message({
type: 'info',
message: 'CheckOut Cancel1'
});
});
let user = {
anumber : "glkk"
};
this.$axios.post("/exceldemo/parametertestthree",user ).then((res)=>{
this.$message({
type: 'info',
message: res.data
});
}).catch(() => {
this.$message({
type: 'info',
message: 'CheckOut Cancel1'
});
});
}