JavaScript blob nom de fichier sans lien

Question

Comment définir le nom d'un fichier blob en JavaScript lors du téléchargement forcé à travers window.location?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

L'exécution du code ci-dessus télécharge un fichier instantanément sans rafraîchissement de la page qui ressemble à :

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Je veux définir le nom de fichier comme my-download.json à la place.

Answer 1

saveFileOnUserDevice = function(file){ // contenu: blob, nom: string
        if(navigator.msSaveBlob){ // Pour ie et Edge
            return navigator.msSaveBlob(file.content, file.name);
        }
        else{
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(file.content);
            link.download = file.name;
            document.body.appendChild(link);
            link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            link.remove();
            window.URL.revokeObjectURL(link.href);
        }
    }

Answer 2

Exemple de travail d'un bouton de téléchargement, pour enregistrer une photo de chat à partir d'une URL en tant que "chat.jpg":

HTML:

Télécharger

JavaScript:

function downloadUrl(url, filename) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function(e) {
    if (this.status == 200) {
      const blob = this.response;
      const a = document.createElement("a");
      document.body.appendChild(a);
      const blobUrl = window.URL.createObjectURL(blob);
      a.href = blobUrl;
      a.download = filename;
      a.click();
      setTimeout(() => {
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      }, 0);
    }
  };
  xhr.send();
}

Answer 3

Window.location.assign n'a pas fonctionné pour moi. Le téléchargement se fait correctement mais sans extension pour un fichier CSV sur la plateforme Windows. Ce qui suit a fonctionné pour moi.

    var blob = new Blob([csvString], { type: 'text/csv' });
    //window.location.assign(window.URL.createObjectURL(blob));
    var link = window.document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    // Construire dynamiquement le nom de fichier et le définir à link.download
    link.download = link.href.split('/').pop() + '.' + extension; 
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

Answer 4

Il s'agit d'une bonne solution facile pour cela.

fonction téléchargerBloob(blob, NomFichier) {
    var lien = document.createElement("a"); // Ou peut-être le récupérer à partir du document actuel
    lien.href = blob;
    lien.télécharger = NomFichier;
    lien.click();
}