我遇到了以下问题,但是找不到解决方法。我使用Spring Boot创建了端点,在使用Postman时,响应主体中包含图像。
但是,当我尝试使用Angular、Blob和FileSaver下载并保存文件到计算机时,我的保存文件无法读取。
这是我的Angular控制器:
vm.download = function (filename) {
console.log("Start download. File name:", filename);
$http.get('api/files/download/' + filename)
.then(function (response) {
console.log(data);
var data = new Blob([response.data], {type: 'image/jpeg;charset=UTF-8'});
FileSaver.saveAs(data, filename);
})
}
以下是我的端点:
@RequestMapping(value = "/files/download/{id:.*}", method = RequestMethod.GET)
@ResponseBody
@Timed
public void DownloadFiles(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) throws IOException {
MongoClient mongoClient = new MongoClient();
DB mongoDB = mongoClient.getDB("angularspingproject");
BasicDBObject query = new BasicDBObject();
query.put("filename", id);
GridFS fileStore = new GridFS(mongoDB, "fs");
GridFSDBFile gridFSDBFile = fileStore.findOne(query);
if (gridFSDBFile != null && id.equalsIgnoreCase((String) gridFSDBFile.getFilename())) {
try {
response.setContentType(gridFSDBFile.getContentType());
response.setContentLength((new Long(gridFSDBFile.getLength()).intValue()));
response.setHeader("content-Disposition", "attachment; filename=" + gridFSDBFile.getFilename());
IOUtils.copyLarge(gridFSDBFile.getInputStream(), response.getOutputStream());
} catch (IOException e) {
throw new RuntimeException("IOError writting file to output stream");
}
}
}
我的标题:
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Length: 316707
Content-Type: image/jpeg;charset=UTF-8
Pragma: no-cache
Server:Apache-Coyote/1.1
X-Application-Context : angularspingproject:8080
X-Content-Type-Options : nosniff
X-XSS-Protection: 1; mode=block
content-Disposition: attachment; filename=main_page.jpg
@编辑 问题已解决
vm.download = function (filename) {
$http.get('api/files/download/' + filename, {responseType:'blob'})
.then(function (response) {
console.log(response);
var data = new Blob([response.data], {type: 'image/jpeg;charset=UTF-8'});
FileSaver.saveAs(data, filename);
})
}
我在 $http 中添加了 responseType: 'blob'。