Fetch API pour forcer le fichier de téléchargement

Question

J'appelle une API pour télécharger le fichier Excel à partir du serveur en utilisant la récupération API, mais il n'a pas forcer le navigateur à télécharger, ci-dessous est ma réponse d'en-tête:

HTTP/1.1 200 OK Content-Length: 168667 
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 
Server: Microsoft-IIS/8.5 
Content-Disposition: attachment; filename=test.xlsx 
Access-Control-Allow-Origin: http://localhost:9000 
Access-Control-Allow-Credentials: true 
Access-Control-Request-Method: POST,GET,PUT,DELETE,OPTIONS 
Access-Control-Allow-Headers: X-Requested-With,Accept,Content-Type,Origin 
Persistent-Auth: true 
X-Powered-By: ASP.NET 
Date: Wed, 24 May 2017 20:18:04 GMT 

Ci-dessous mon code que j'utilise pour appeler l'API:

this.httpClient.fetch(url, { 
    method: 'POST', 
    body: JSON.stringify(object), 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    } 
}) 

Answer 1

le navigateur ne montrera pas l'interaction habituelle pour le téléchargement (Enregistrer sous ... afficher de dialogue, etc.), que si vous naviguez cette ressource. Il est plus facile de montrer la différence avec un exemple:

1. window.location='http://mycompany.com/'
2. charge http://mycompany.com/ via XHR/Fetch en arrière-plan.

Dans 1., le navigateur va charger la page et afficher son contenu. En 2., le navigateur chargera les données brutes et vous les retournera, mais vous devrez les afficher vous-même.

Vous devez faire quelque chose de similaire avec des fichiers. Vous avez les données brutes, mais vous devez les "afficher" vous-même. Pour ce faire, vous devez créer un objectURL pour votre fichier téléchargé et y naviguer:

this.httpClient 
    .fetch(url, {method, body, headers}) 
    .then(response => response.blob()) 
    .then(blob => URL.createObjectURL(blob)) 
    .then(url => { 
     window.open(url, '_blank'); 
     URL.revokeObjectURL(url); 
    }); 

Ce va chercher la réponse, il se lit comme un blob, crée un objectURL, l'ouvre (dans un nouvel onglet), puis révoque l'URL.

Plus sur l'objet-URL: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Answer 2

J'ai trouvé une autre façon de télécharger et il fonctionnera sur IE en utilisant

https://www.npmjs.com/package/downloadjs

Answer 3

Il y a quelques bibliothèques pratiques qui peuvent résoudre ce problème. Pour résoudre un problème que j'avais avec CSV/téléchargement de texte j'ai utilisé FileSaver.

Exemple:

var saveAs = require('file-saver'); 

fetch('/download/urf/file', { 
    headers: { 
    'Content-Type': 'application/pdf' 
    }, 
    responseType: 'blob' 
}).then(response => response.blob()) 
    .then(blob => saveAs(blob, 'test.csv')); 

Il y a aussi download.js lib comme expliqué ici dans this question.