Article Directory
Common a label download
This is a non-asynchronous download. Be careful not to write @ResponseBody on the backend.
When obtaining the pdf file stream, it will be opened with a browser by default. a tag cannot be resolved.
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);
Axios asynchronous download with FileSaver
The pro-test can solve the problem that the pdf download file stream will be previewed first.
- The components need to be installed first:
npm install file-saver --save - Import components in the current vue:
import FileSave from 'file-saver' - Use the saveAs() method to save the blob file stream, avoiding preview
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);
});
Native asynchronous download with FileSaver
The pro-test can solve the problem that the pdf download file stream will be previewed first.
- The components need to be installed first:
npm install file-saver --save - Import components in the current vue:
import FileSave from 'file-saver' - Use the saveAs() method to save the blob file stream, avoiding preview
//访问后端的文件链接
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();
Backend writes file stream reference
//下载模板的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();
}
}