如何解决这是在 Vue 中下载文件的正确方法吗?
因为我这样做的时候,不行,文件为空,content-disposable有问题,不知道能不能确定格式正确:
api.downloadFile(fileId).then(response => {
let blob = new Blob([response.data],{ type: response.headers['content-type'] });
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "nameofFile" + '.pdf';
link.click();
}).catch(error=>{
console.log(error);
})
当下面的这个解决方案工作并且完美运行时,它会下载好的文件,内容、格式(格式可以不同,pdf、png、txt 等)和好的名称,但我不认为它通过 axios 拦截器,所以我不认为它是安全的等(也许我错了)
downloadFile(fileId) {
console.log(fileId);
let link = document.createElement('a');
link.href = "http://localhost:8081/download?fileId=" + fileId;
link.click();
}
我的 axios 方法是这样的:
downloadFile:(fileId)=>instance.get('/download?fileId=' + fileId).then(response=>{
return response;
})
有人能告诉我如何使用 blob、内容一次性和安全的解决方案以好的方式做到这一点吗?
我的后端方法如下:
@GetMapping(value = "/download")
public ResponseEntity<Resource> download(@AuthenticationPrincipal User user,@RequestParam("fileId") String fileId) throws FileNotFoundException {
Document file = storingService.loadFileByUsernameAndFileId(user.getUsername(),fileId);
Resource resource = new ByteArrayResource(file.getBinary().getData());
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_disPOSITION,"attachment; filename=\"" + file.getFileName() + "\"")
.header(HttpHeaders.CONTENT_TYPE,file.getContentType())
.body(resource);
}
此链接的响应:http://localhost:8081/download?fileId=xyz 是:
解决方法
我认为显示空白的 pdf 与您的 axios 调用有关。您至少要添加一个响应类型。
downloadFile:(fileId)=>instance.get('/download?fileId=' + fileId,{ responseType: 'arraybuffer' })
.then(response=>{return response;})
我在这里传递给 axios 的第二个对象是一个配置对象。查看他们的文档 here。
Here's 另一个我用来帮助我解决类似问题的 Stack Overflow。 here's 另一个关于“arraybuffer”和“blob”之间的区别。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。