Le téléchargement et l'enregistrement de fichiers à partir du serveur utilisant AngularJS
J'ai le problème suivant et je ne trouve pas de résolution.
J'ai créé de point de terminaison avec Spring Boot, et quand je suis en utilisant Facteur je suis de réponse avec l'image sur le corps de la demande.
Mais quand je suis en train de télécharger et d'enregistrer le fichier sur l'ordinateur à l'aide Angulaire et d'objets Blob et FileSaver mon fichier enregistré est incapable de lire.
C'est mon angulaire de contrôleur:
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);
})
}
et voici mon point de terminaison:
@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");
}
}
}
Mon en-tête:
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
@Edit
Problème résolu
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);
})
}
J'ai ajouté responseType: 'blob' à $http
- Hey merci. Cela m'a aidé.
Vous devez vous connecter pour publier un commentaire.
Je suppose que vous n'êtes pas d'obtenir un tableau d'octets à partir de votre $http.obtenez de l'appel. Essayez d'ajouter:
J'ai un spécial service de téléchargement angulaire qui fonctionne très bien et simple:
Filesaver.js est de ici.
ContentDispositionParser vous pouvez utiliser n'importe quoi ou écrire vous-même, il n'est utilisé que pour obtenir le bon nom de fichier, car il n'est apparemment pas une tâche facile, mais pas directement connecté à l'enregistrement du fichier lui-même (vous pouvez ajouter le nom en js par exemple)