Différents comportements de l'attribut <a> avec attribut de téléchargement et dataUrl href?

Question

Je rencontre un comportement étrange dans divers navigateurs lorsque j'essaie d'utiliser l'attribut download dans la balise <a> lorsque href est dataUrl.

Extrait de code:

var a = document.createElement('a'); 
a.href = [generated dataUrl]; 
a.download = filename; 
console.log(a.outerHTML); 
a.click(); 

contenu de l'échantillon de balise généré (ligne console.log ci-dessus):

<a href="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBAoA...Qwwe=" download="testfile.xlsx" ></a> 
<a href="data:image/png;base64,iVBORw...ElFTkSuQmCC" download="testfile.png"></a> 

sortie/comportement Console:

• Chrome: Les fichiers sont téléchargés comme prévu, et png et xls sont utilisables.
• FireFox: Rien ne se passe. Aucun avertissement/erreur de console affiché.

• EDGE:

  • un message console: Navigation a eu lieu. data: image/png; base64, iVBORw ...

  • Console avertissement: DOCTYPE attendu. Envisagez d'ajouter un doctype HTML5 valide: "".

• IE11: Console: rien; essaie d '"ouvrir les données: image/png; base64, iVBORw ..." url dans la fenêtre courante.

generated dataUrl sont revérifiées et sont bien, ce qui est également montré par le comportement de Chrome.

Je pensais que <a href="data:[mime][;base64],[encoded data] ></a>" download="filename.ext" était à peu près une chose standard maintenant.

Question:

Y at-il un meilleur (à savoir cross-browser compatible) moyen d'invoquer le téléchargement de JavaScript généré fichiers?

Answer 1

Certains navigateurs ne prennent pas en charge l'attribut de téléchargement html5.
Dans ce cas, vous pouvez utiliser filesaver.js

if(typeof link.download !== 'undefined'){ 
    //use <a> download 
} 
else{ 
    blob = toBlob(imageURIData); 
    saveAs(blob, name);//use filesaver.js 
}