Impossible de servir un fichier à télécharger dans IE à partir d'Angular

Question

J'essaie de produire un fichier texte à mes utilisateurs et le code ci-dessous fait parfaitement le travail dans tous les navigateurs sauf IE et Edge (dans ce dernier, je peux ' t contrôle le nom du fichier mais il est au moins produit).

emitFile(stage: any): void { 
    const blob = new Blob([stage.elaboration], { type: "text/csv" }); 
    const url = window.URL.createObjectURL(blob); 
    const anchor = document.createElement("a"); 
    anchor.href = url; 
    anchor.download = "ff-rocks-ie-sucks.txt"; 
    anchor.click(); 
} 

Il y a an open issue ticket à cet égard, mais il est daté de 18 mois en arrière et l'activité récente est plutôt non récente. Il semble que c'est un endroit où les espoirs viennent à mourir.

Je n'ai trouvé aucune solution de contournement raisonnable. Ceux que j'ai vus étaient non-fonctionnants ou ont inclus une suggestion (très sage mais infaisable) pour obtenir navigateurs décents pour l'amour du canard. Et je crois que c'était plus une faute de frappe qu'une référence d'oiseau.

Que faut-il faire à ce sujet?

Answer 1

Vous devriez essayer d'utiliser msSaveBlob() au lieu de l'attribut download.

emitFile(stage: any): void { 
    const blob = new Blob([stage.elaboration], { type: "text/csv" }); 
    windows.navigator.msSaveBlob(blob,"ff-rocks-ie-sucks.txt"); 
} 

Cela devrait fonctionner correctement pour IE et Edge.

EDIT: La solution complète pour IE, FF et Chrome serait comme ça:

emitFile(stage: any): void { 
    const blob = new Blob([stage.elaboration], { type: "text/csv" }); 
    if(window.navigator.msSaveOrOpenBlob) //IE & Edge 
    { 
    //msSaveBlob only available for IE & Edge 
    windows.navigator.msSaveBlob(blob,"ff-rocks-ie-sucks.txt"); 
    } 
    else //Chrome & FF 
    { 
    const url = window.URL.createObjectURL(blob); 
    const anchor = document.createElement("a"); 
    anchor.href = url; 
    anchor.download = "ff-rocks-ie-sucks.txt"; 
    document.body.appendChild(anchor); //For FF 
    anchor.click(); 
    //It's better to remove the elem 
    document.body.removeChild(anchor); 
    link.remove(); 
    } 
}