使用AngularJS从服务器下载和保存文件 [英] Downloading and saving files from server using AngularJS
本文介绍了使用AngularJS从服务器下载和保存文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到了以下问题,但找不到解决方法. 我使用Spring Boot创建了终结点,当我使用 Postman 时,我收到了有关正文请求的响应.
I've got following issue and I can't find resolution. I created endpoint with Spring Boot and when I'm using Postman I'm getting response with image on body request.
但是当我尝试使用Angular和Blob和FileSaver在计算机上下载并保存文件时,保存的文件无法读取.
But when I'm trying download and save file on computer using Angular and Blob and FileSaver my saved file is unable to read.
这是我的角度控制器:
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
推荐答案
我猜想您没有从$ http.get调用中获得字节数组.尝试添加:
I'd guess that you're not getting a byte array back from your $http.get call. Try adding:
vm.download = function (filename) {
var config = {headers: {
'Accept': "image/jpeg"
}
};
$http.get('api/files/download/' + filename, config).then(function (response) {
var myBuffer= new Uint8Array( response.data );
var data = new Blob([myBuffer], {type: 'image/jpeg;charset=UTF-8'});
FileSaver.saveAs(data, filename);
})
}
这篇关于使用AngularJS从服务器下载和保存文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文