Utilisation de HTML5 / JavaScript pour générer et enregistrer un fichier


317

J'ai joué avec WebGL ces derniers temps et j'ai réussi à faire fonctionner un lecteur Collada. Le problème est qu'il est assez lent (Collada est un format très détaillé), donc je vais commencer à convertir des fichiers dans un format plus facile à utiliser (probablement JSON). J'ai déjà le code pour analyser le fichier en JavaScript, je peux donc aussi bien l'utiliser que mon exportateur! Le problème est la sauvegarde.

Maintenant, je sais que je peux analyser le fichier, envoyer le résultat au serveur et que le navigateur demande le fichier au serveur en téléchargement. Mais en réalité, le serveur n'a rien à voir avec ce processus particulier, alors pourquoi l'impliquer? J'ai déjà le contenu du fichier souhaité en mémoire. Existe-t-il un moyen de présenter à l'utilisateur un téléchargement à l'aide de JavaScript pur? (J'en doute, mais autant demander ...)

Et pour être clair: je n'essaie pas d'accéder au système de fichiers à l'insu des utilisateurs! L'utilisateur fournira un fichier (probablement par glisser-déposer), le script transformera le fichier en mémoire et l'utilisateur sera invité à télécharger le résultat. Toutes ces activités devraient être des activités «sûres» en ce qui concerne le navigateur.

[EDIT]: Je ne l'ai pas mentionné d'avance, donc les affiches qui ont répondu "Flash" sont suffisamment valides, mais une partie de ce que je fais est une tentative de mettre en évidence ce qui peut être fait avec du HTML5 pur ... alors Flash est dans mon cas. (Bien que ce soit une réponse parfaitement valable pour quiconque fait une "vraie" application web.) Cela étant, il semble que je n'ai pas de chance, sauf si je veux impliquer le serveur. Merci quand même!


8
Vous pourriez envisager de changer la réponse acceptée, il semble y avoir maintenant un moyen purement HTML
Pekka

Réponses:


256

OK, création de données: l'URI fait définitivement l'affaire pour moi, grâce à Matthew et Dennkster qui ont souligné cette option! Voici essentiellement comment je le fais:

1) obtenir tout le contenu dans une chaîne appelée "contenu" (par exemple en le créant initialement ou en lisant innerHTML de la balise d'une page déjà construite).

2) Créez l'URI de données:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Il y aura des limitations de longueur en fonction du type de navigateur, etc., mais par exemple Firefox 3.6.12 fonctionne jusqu'à au moins 256k. Le codage en Base64 à la place à l'aide d'encodeURIComponent pourrait rendre les choses plus efficaces, mais pour moi, c'était ok.

3) ouvrir une nouvelle fenêtre et la "rediriger" vers cet URI vous invite à indiquer l'emplacement de téléchargement de ma page générée par JavaScript:

newWindow = window.open(uriContent, 'neuesDokument');

C'est tout.


34
Si vous souhaitez éviter d'utiliser une fenêtre contextuelle, qui peut être bloquée, vous pouvez définir location.hrefle contenu. location.href = uriContent.
Alex Turpin

12
Salut, j'ai essayé mais il télécharge le fichier en tant que fichier .part. Comment puis-je définir le type de fichier?
Sedat Başar

6
Les URI de données @ SedatBaşar ne prennent pas en charge la définition d'un nom de fichier, vous devez vous fier au navigateur qui définit une extension appropriée à l'aide du type MIME. Mais si le type mime peut être rendu par le navigateur, il ne le téléchargera pas, mais il l'affichera. Il existe d'autres façons de procéder, mais aucune ne fonctionne dans IE <10.
panzi

7
IE ne sopporte pas vraiment les URI de données et Firefox semble enregistrer les fichiers sous un nom aléatoire.
nylund

25
Je pense que nous rendons cela plus difficile que nécessaire. Ouvrez votre console JS sur cette page et mettez-la location.href = "data:application/octet-stream," + encodeURIComponent(jQuery('#answer-4551467 .post-text').first().text());et elle enregistrera le contenu de la réponse de @ Nøk dans un fichier. Je n'ai pas IE pour le tester, mais cela fonctionne pour le webkit.
Bruno Bronosky

278

Solution simple pour les navigateurs compatibles HTML5 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Usage

download('test.txt', 'Hello world!');

2
Si vous connaissez l'URL source que vous souhaitez télécharger, c'est la meilleure solution!
sidonaldson

31
La possibilité de définir le nom de fichier en fait un gagnant.
Omn

9
Cette méthode a fonctionné dans Chrome jusqu'à la dernière mise à jour que j'ai reçue il y a quelques jours (35.0.1916.114 m). Maintenant, cela fonctionne partiellement en ce que le nom de fichier et l'extension ne fonctionnent plus (il nomme toujours le fichier download.txt indépendamment de ce qui est passé.)
Sevin7

6
J'ai Chrom 42.0.2311.90, et cela fonctionne pour moi avec le nom de fichier attendu.
Saurabh Kumar

4
S'il y a une limite sur la quantité de données qui peuvent être incluses?
Kaspar Lee

80

HTML5 a défini une window.saveAs(blob, filename)méthode. Il n'est actuellement pris en charge par aucun navigateur. Mais il existe une bibliothèque de compatibilité appelée FileSaver.js qui ajoute cette fonction à la plupart des navigateurs modernes (y compris Internet Explorer 10+). Internet Explorer 10 prend en charge une navigator.msSaveBlob(blob, filename)méthode ( MSDN ), qui est utilisée dans FileSaver.js pour la prise en charge d'Internet Explorer.

J'ai écrit un article de blog avec plus de détails sur ce problème.


1
Et le blocage des popups? Le comportement de cette bibliothèque est similaire à la solution de @ Nøk. Le texte brut dans Firefox est ouvert dans un nouveau. Seul Chrome essaie de l'enregistrer, mais il modifie l'extension (j'ai besoin d'un fichier dot sans extension).
ciembor

1
@ciembor la variante d'attribut de téléchargement (URL de l'objet +) (que j'utilise avec Chrome) vous permet de définir un nom de fichier. Cela fonctionne pour moi en chrome.
panzi

1
@ciembor aha et un popup n'est pas bloqué si un clic le provoque directement.
panzi

6
FileSaver.js prend en charge IE maintenant
Eli Gray

15
W3C dit: Les travaux sur ce document ont été interrompus et il ne doit pas être référencé ou utilisé comme base de mise en œuvre.
WaiKit Kung

48

Enregistrement de fichiers volumineux

Les URI de données longues peuvent entraîner des problèmes de performances dans les navigateurs. Une autre option pour enregistrer les fichiers générés côté client consiste à placer leur contenu dans un objet Blob (ou fichier) et à créer un lien de téléchargement à l'aide de URL.createObjectURL(blob). Cela renvoie une URL qui peut être utilisée pour récupérer le contenu du blob. Le blob est stocké dans le navigateur jusqu'à ce que soit URL.revokeObjectURL()appelé sur l'URL ou que le document qui l'a créé soit fermé. La plupart des navigateurs Web prennent en charge les URL d'objet , Opera Mini est le seul qui ne les prend pas en charge.

Forcer un téléchargement

Si les données sont du texte ou une image, le navigateur peut ouvrir le fichier au lieu de l'enregistrer sur le disque. Pour provoquer le téléchargement du fichier en cliquant sur le lien, vous pouvez utiliser ledownload attribut. Cependant, tous les navigateurs Web ne prennent pas en charge l'attribut de téléchargement . Une autre option consiste à utiliser application/octet-streamcomme type mime du fichier, mais cela entraîne la présentation du fichier comme un blob binaire qui est particulièrement peu convivial si vous ne spécifiez pas ou ne pouvez pas spécifier un nom de fichier. Voir aussi ' Forcer à ouvrir la fenêtre contextuelle "Enregistrer sous ..." ouverte au lien texte, cliquez pour le pdf en HTML '.

Spécification d'un nom de fichier

Si le blob est créé avec le constructeur de fichiers, vous pouvez également définir un nom de fichier, mais seuls quelques navigateurs Web (y compris Chrome et Firefox) prennent en charge le constructeur de fichiers . Le nom de fichier peut également être spécifié comme argument dudownload attribut, mais cela est soumis à une tonne de considérations de sécurité . Internet Explorer 10 et 11 fournit sa propre méthode, msSaveBlob , pour spécifier un nom de fichier.

Exemple de code

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;
<a id="link" target="_blank" download="file.txt">Download</a>


1
Puis-je afficher une boîte de dialogue (popup) pour spécifier un dossier (répertoire) pour enregistrer le fichier?
Calvin

@Calvin: J'ai mis à jour la réponse pour expliquer comment forcer un téléchargement et fournir un nom de fichier. Pour IE, je pense que vous pouvez utiliser msSaveBlobpour ouvrir la boîte de dialogue "Enregistrer sous". Pour les autres navigateurs, votre seule option est de choisir manuellement "Enregistrer sous" dans le menu contextuel du lien de téléchargement.
bcmpinc

1
@ Jek-fdrv: Seuls les Blob-urls fonctionnent dans Safari. L'attribut de téléchargement et le constructeur de fichiers ne sont pas pris en charge par Safari, vous ne pouvez donc pas forcer un téléchargement, ce qui signifie que le blob sera probablement ouvert dans le navigateur lui-même et vous ne pouvez pas spécifier de nom de fichier. Pour l'exemple donné, vous devriez toujours pouvoir télécharger le fichier avec Safari en utilisant le menu contextuel du lien.
bcmpinc


Ceci est une réponse très utile et informative. Une dernière chose qui peut aider les gens comme moi: après avoir défini document.getElementById('link').href = url;, votre code peut continuer et lancer le lien en utilisant la .click()méthode de l'élément .
LarsH

36
function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

3
Quel est l'effet de contentType? A quoi cela sert?
Uri

3
Celui-ci fonctionne bien même dans le dernier Chrome, contrairement à la réponse de @ Matěj Pokorný. Merci.
Alexander Amelkin

2
Cela ne fonctionne pas pour moi sur FF36 ou IE11. Si je remplace a.clickpar du code utilisant document.createEvent()comme suggéré par Matěj Pokorný, cela fonctionne sur FF mais pas sur IE. Je n'ai pas essayé Chrome.
Peter Hull

25

Jetez un oeil à Doug Neiner Downloadify qui est une interface JavaScript basé sur Flash pour ce faire.

Downloadify est une minuscule bibliothèque JavaScript + Flash qui permet de générer et d'enregistrer des fichiers à la volée, dans le navigateur, sans interaction avec le serveur.


6
Pour la plupart des gens, c'est probablement la réponse dont ils auront besoin. Donc, même s'il ne répond pas à mes exigences spécifiques (comme expliqué ci-dessus), je le marque comme la réponse acceptée.
Toji

2
@Toji ah, je vois. Peut-être demander et reformuler sous la HTML 5bannière et étiqueter en conséquence? Cela serait susceptible d'attirer les utilisateurs qui connaissent ce domaine spécifique (encore une foule relativement petite en ce moment, je suppose). Je suis sûr que cela peut être fait en HTML 5 mais je ne sais pas comment.
Pekka

1
Le domaine downloadify.info Downloadify a-t-il été acheté / transféré et si oui, y a-t-il un nouvel emplacement? Le site actuel semble totalement indépendant de la réponse donnée.
Christos Hayward

17
Cela ne répond pas à la question intitulée Utilisation de HTML5 ....
Ixx

5
@Ixx bien pour être juste, qui a été ajouté après la publication de la réponse. Pourtant, vous avez raison. La réponse ci-dessous doit être acceptée
Pekka

17

Solution simple!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Fonctionne dans tous les navigateurs modernes.


Salut, savez-vous comment spécifier le comportement de l'attribut "download" en utilisant window.open ou une autre fonction javascript?
yucer

2
@yucer Il n'y a aucun attribut de téléchargement (ou aucun attribut d'ailleurs) avec window.open(). Ce n'est pas pertinent. Vous pouvez utiliser cette méthode et y forcer un .click(), mais surveillez le timing car Firefox ne l'aime pas si vous appelez .click()avant de laisser l'élément s'attacher au corps.
Brad

Mais malheureusement, tous les espaces sont supprimés. Dans mon cas, c'est vraiment mauvais car je veux télécharger le code source d'un fichier SVG.
frankenapps

les espaces sont préservés si vous utilisez encodeURIComponent (content)
Mike Redrobe

ne peut pas choisir le nom dans Firefox, mais le chrome fonctionne
Bhikkhu Subhuti

10

Vous pouvez générer un URI de données . Cependant, il existe des limitations spécifiques au navigateur.


1
C'est intéressant. Je vais m'y intéresser davantage quand j'en aurai l'occasion. Merci!
Toji

@quantumpotato, générer l'URL est en fait un peu difficile à expliquer. Tous les détails sont dans la RFC 2397 . Vous pouvez utiliser des outils comme celui-ci pour les tests. Ensuite, pour votre application réelle, vous pouvez rechercher un URI de données ou une bibliothèque de base 64 pour votre langue. Si vous ne le trouvez pas, n'hésitez pas à poser une question de suivi. Certaines des limitations spécifiques au navigateur sont données dans l' article Wikipedia . Par exemple, IE limite la longueur et le type (par exemple pas text / html).
Matthew Flaschen

Générer des URL de données n'est pas si compliqué: "data:text/plain;charset=UTF-8,"+encodeURIComponent(text)Mais oui, IE limite la taille des URL de données à une quantité inutilisable et il ne les prend pas en charge pour des choses comme window.open(...)ou des iframes (je pense).
panzi

@panzi, ce n'est pas aussi simple que ça non plus. D'une part, ce n'est pas le bon type MIME pour Collada ou JSON.
Matthew Flaschen

réponse trop informative. veuillez ajouter les spécifications des navigateurs, si vous les mentionnez.
T.Todua

10

J'ai utilisé FileSaver ( https://github.com/eligrey/FileSaver.js ) et cela fonctionne très bien.
Par exemple, j'ai fait cette fonction pour exporter les journaux affichés sur une page.
Vous devez passer un tableau pour l'instanciation du Blob, donc je n'ai peut-être pas écrit cela correctement, mais cela fonctionne pour moi.
Au cas où, soyez prudent avec le remplacement: c'est la syntaxe pour rendre cela global, sinon il ne remplacera que le premier qu'il rencontre.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

2
FileSaver est génial, voici un IE Shim pour pré-IE10 fonction preIE10SaveAs: (nom de fichier, contenu du fichier, type de mime) {var w = window.open (); var doc = w.document; doc.open (mimetype, 'replace'); doc.charset = "utf-8"; doc.write (filecontent); doc.close (); doc.execCommand ("SaveAs", null, nom de fichier); }
août

Un avertissement sur le shim de @ aqm: il exécute les balises de script.
GameFreak

En outre, il peut être souhaitable de mettre w.close();après leexecCommand
GameFreak

8

J'ai trouvé deux approches simples qui fonctionnent pour moi. Tout d'abord, en utilisant un aélément déjà cliqué et en injectant les données de téléchargement. Et deuxièmement, générer un aélément avec les données de téléchargement, les exécuter a.click()et les supprimer à nouveau. Mais la deuxième approche ne fonctionne que si elle est également invoquée par une action de clic d'un utilisateur. (Certains) Blocage click()du navigateur provenant d'autres contextes comme lors du chargement ou déclenché après un délai d'attente (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

2
Vous pouvez également insérer le adans le document (éventuellement avec "display:none"), cliquer dessus, puis le supprimer.
Teepeemm

1
est-ce que cela fonctionnerait dans les navigateurs où l'attribut de téléchargement n'est pas pris en charge comme même les IE modernes et les safaris? caniuse.com/#feat=download
Muhammad Umer

1
Je viens de tester Safari 5.0 sous wine. La première version fonctionne, la seconde non. J'ai également testé IE 8 (vin) et cela ne fonctionne pas.
maikel

6

Voici un lien vers la méthode URI de données suggérée par Mathew, cela a fonctionné sur safari, mais pas bien parce que je n'ai pas pu définir le type de fichier, il est enregistré comme "inconnu" et ensuite je dois y retourner plus tard et le changer dans l'ordre pour visualiser le fichier ...

http://www.nihilogic.dk/labs/canvas2image/


4

Vous pouvez utiliser localStorage. Il s'agit de l'équivalent Html5 des cookies. Il semble fonctionner sur Chrome et Firefox MAIS sur Firefox, je devais le télécharger sur un serveur. Autrement dit, les tests directement sur mon ordinateur personnel n'ont pas fonctionné.

Je travaille sur des exemples HTML5. Accédez à http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html et faites défiler jusqu'au labyrinthe. Les informations pour reconstruire le labyrinthe sont stockées à l'aide de localStorage.

Je suis venu à cet article à la recherche de JavaScript HTML5 pour charger et travailler avec des fichiers xml. Est-ce la même chose que les anciens HTML et JavaScript ????


4

essayer

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Si vous souhaitez télécharger des données binaires, regardez ici

Mettre à jour

2020.06.14 J'ai mis à niveau Chrome vers 83.0 et au-dessus de l'arrêt de l'extrait de code SO (en raison des restrictions de sécurité du sandbox ) - mais la version JSFiddle fonctionne - ici


3

Comme mentionné précédemment, l' API File , ainsi que les API FileWriter et FileSystem peuvent être utilisées pour stocker des fichiers sur la machine d'un client à partir du contexte d'un onglet / d'une fenêtre de navigateur.

Cependant, il y a plusieurs choses concernant les deux dernières API que vous devez connaître:

  • Les implémentations des API n'existent actuellement que dans les navigateurs basés sur Chromium (Chrome et Opera)
  • Les deux API ont été retirées de la voie des normes W3C le 24 avril 2014 et sont désormais propriétaires
  • La suppression des API (désormais propriétaires) des navigateurs d'implémentation à l'avenir est une possibilité
  • Un bac à sable (un emplacement sur le disque en dehors duquel les fichiers ne peuvent produire aucun effet) est utilisé pour stocker les fichiers créés avec les API
  • Un système de fichiers virtuel (une structure de répertoires qui n’existe pas nécessairement sur le disque sous la même forme que lorsqu’il est accessible depuis le navigateur) est utilisé pour représenter les fichiers créés avec les API

Voici des exemples simples de la façon dont les API sont utilisées, directement et indirectement, en tandem pour ce faire:

BakedGoods *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Utilisation des API File, FileWriter et FileSystem brutes

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Bien que les API FileSystem et FileWriter ne soient plus sur la voie des normes, leur utilisation peut être justifiée dans certains cas, à mon avis, parce que:

  • Le regain d'intérêt des fournisseurs de navigateurs non implémentés peut les replacer directement dessus
  • La pénétration du marché des navigateurs d'implémentation (basés sur le chrome) est élevée
  • Google (le principal contributeur de Chromium) n'a pas donné de date de fin de vie aux API

Toutefois, vous devez décider si "certains cas" englobent les vôtres.

* BakedGoods est maintenu par nul autre que ce gars ici :)


2

Ce fil était inestimable pour comprendre comment générer un fichier binaire et inviter à télécharger le fichier nommé, le tout en code client sans serveur.

La première étape pour moi a été de générer le blob binaire à partir des données que je sauvegardais. Il y a beaucoup d'exemples pour le faire pour un seul type binaire, dans mon cas, j'ai un format binaire avec plusieurs types que vous pouvez passer comme un tableau pour créer le blob.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

L'étape suivante consiste à demander au navigateur d'inviter l'utilisateur à télécharger ce blob avec un nom prédéfini.

Tout ce dont j'avais besoin était un lien nommé que j'ai ajouté dans le HTML5 que je pouvais réutiliser pour renommer le nom de fichier initial. Je l'ai gardé caché car le lien n'a pas besoin d'être affiché.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

La dernière étape consiste à inviter l'utilisateur à télécharger le fichier.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

1

Voici un tutoriel pour exporter des fichiers au format ZIP:

Avant de commencer, il existe une bibliothèque pour enregistrer les fichiers, le nom de la bibliothèque est fileSaver.js, vous pouvez trouver cette bibliothèque ici. Commençons, incluons maintenant les bibliothèques requises:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Copiez maintenant ce code et ce code téléchargera un fichier zip avec un fichier hello.txt ayant un contenu Hello World. Si tout fonctionne correctement, cela téléchargera un fichier.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Cela va télécharger un fichier appelé file.zip. Vous pouvez en savoir plus ici: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.