重点解决PDF传递到响应体中的时候会被浏览器自动打开的问题
普通a标签下载
这是非异步下载，后端注意不要写@ResponseBody
在获取pdf文件流的时候会默认使用浏览器打开。a标签无法解决。
const a = document.createElement('a');
var href= "/template/"+format+"/"+this.templateInfoForm.templateName;
a.setAttribute('href', href);
// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
var filename = this.templateInfoForm.templateName + "." + format
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 在内存中移除URL 对象
window.URL.revokeObjectURL(herf);
搭配FileSaver的axios异步下载
亲测可以解决pdf下载文件流会先预览的问题。
- 需要先安装组件：
npm install file-saver --save - 在当前vue中import组件：
import FileSave from 'file-saver' - 使用saveAs()方法保存blob文件流，避免预览
var filename = this.templateInfoForm.templateName + "." + format
var url = "/template/"+format+"/"+this.templateInfoForm.templateName;
//异步申请文件流
this.$http.get(
url,
{
headers:{
"Content-Type" : "application/octet-stream",
},
responseType: "blob"
}
).then((res) => {
var file = new Blob([res.data], {
type: 'application/'+format
});
//直接下载而不预览
saveAs(file, filename);
});
搭配FileSaver的原生异步下载
亲测可以解决pdf下载文件流会先预览的问题。
- 需要先安装组件：
npm install file-saver --save - 在当前vue中import组件：
import FileSave from 'file-saver' - 使用saveAs()方法保存blob文件流，避免预览
//访问后端的文件链接
var url = "/template/"+format+"/"+this.templateInfoForm.templateName;
//你要保存的文件名
var filename = this.templateInfoForm.templateName + "." + format
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
//配置请求头
oReq.responseType = "blob";
//对响应对象进行配置
oReq.onload = function() {
//对响应头进行配置
var file = new Blob([oReq.response], {
type: 'application/'+format
});
//把文件流直接保存到本地，可以避免用浏览器打开（比如pdf）
saveAs(file, filename);
};
oReq.send();
后端写入文件流参考
//下载模板的pdf版本
@GetMapping("/template/pdf/{templateName}")
@ResponseBody
public void getPdf(@PathVariable("templateName") String templateName, HttpServletResponse response) {
String filePath = templateLocation.getLocation() + templateName + "\\" + templateName + ".pdf";
BufferedInputStream bis = null;
BufferedOutputStream bos = null;
try {
bis = new BufferedInputStream(new FileInputStream(filePath));
bos = new BufferedOutputStream(response.getOutputStream());
byte[] buffer = new byte[1024];
int length;
while ((length = bis.read(buffer)) != -1) {
bos.write(buffer, 0, length);
}
bis.close();
bos.close();
}catch (Exception e) {
e.printStackTrace();
}
}
