JavaScript : Créer et enregistrer un fichier

Question

JavaScript : Créer et enregistrer un fichier

Demandé el 15 de Novembre, 2012: Quand la question a-t-elle été
82589 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Cette question a déjà des réponses:

Créez un fichier dans la mémoire pour l’utilisateur de télécharger, pas par l’intermédiaire de serveur (5 réponses )

J'ai des données que je veux écrire dans un fichier, et ouvrir une boîte de dialogue de fichier pour que l'utilisateur puisse choisir où enregistrer le fichier. Ce serait génial si cela fonctionnait dans tous les navigateurs, mais il faut que cela fonctionne dans Chrome. Je veux faire tout cela côté client.

En gros, je veux savoir ce qu'il faut mettre dans cette fonction :

saveFile: function(data)
{
}

La fonction prend des données, demande à l'utilisateur de sélectionner un emplacement pour enregistrer le fichier et crée un fichier à cet emplacement avec ces données.

L'utilisation du langage HTML convient également, si cela peut vous aider.

Demandé el 15 de Novembre, 2012 par user1756980

7 votes

A été une copie exacte de Créez un fichier en mémoire pour que l'utilisateur puisse le télécharger, sans passer par le serveur. depuis des années.

Commenté el 7 de Novembre, 2016 par Dan Dascalescu

Answer 1

5 Réponses

Answer 2

310voto

Kanchu Points 1686

Une amélioration très mineure du code par Awesomeness01 (pas besoin de balise d'ancrage) avec ajout comme suggéré par image réelle (support pour IE) :

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

Testé pour fonctionner correctement dans Chrome, FireFox et IE10.

Dans Safari, les données s'ouvrent dans un nouvel onglet et il faut enregistrer manuellement ce fichier.

Répondu el 14 de Juin, 2015 par Kanchu (1686 Points )

1 votes

Plus précisément, quelle version d'IE ?

Commenté el 8 de Février, 2016 par Aaron Yarborough

0 votes

@Soren Il ne fonctionne actuellement dans aucune version d'IE, pour autant que je sache. Il est possible que Safari ne l'ait pas non plus, mais je ne travaille pas avec ces versions et il faudrait que je vérifie.

Commenté el 31 de Mars, 2016 par Awesomeness01

0 votes

Ne fonctionne pas dans Google Chrome. Je pense en faire un bookmarklet. javascript:function download(text, name, type) { var a = document.getElementById("content"); var file = new Blob([text], {type: type}); a.href = URL.createObjectURL(file); a.download = name; }

Commenté el 1 de Avril, 2016 par Jeno

Afficher 13 autres commentaires

Answer 3

147voto

Awesomeness01 Points 2013

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}

<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

Vous pouvez ensuite télécharger le fichier en plaçant l'attribut download sur la balise d'ancrage.

La raison pour laquelle je préfère cette méthode à la création d'une url de données est que vous n'avez pas besoin de créer une longue url, vous pouvez simplement générer une url temporaire.

Répondu el 30 de Mars, 2015 par Awesomeness01 (2013 Points )

0 votes

@Banjocat Vous devez vérifier si le navigateur supporte certains objets. Exemple de détection : if("URL"in window&&"createObjectURL"in URL&&"download"in Element.prototype) Sinon, il suffit de changer la méthode de téléchargement ou de constater que le navigateur ne prend pas en charge les objets nécessaires au téléchargement du fichier.

Commenté el 20 de Janvier, 2016 par hydroper

0 votes

Dans firefox, cela fonctionne si vous cliquez sur le lien, mais si vous faites un clic droit et choisissez Enregistrer le lien sous... rien ne se passe.

Commenté el 28 de Avril, 2018 par aamarks

0 votes

Ne fonctionne pas dans Google Chrome : Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details.

Commenté el 26 de Décembre, 2020 par posfan12

Afficher 1 autres commentaires

Answer 4

139voto

lostsource Points 6182

Ce projet sur Github semble prometteur :

https://github.com/eligrey/FileSaver.js

FileSaver.js met en œuvre l'interface FileSaver saveAs() du W3C dans les navigateurs qui ne la prennent pas en charge de manière native.

Vous pouvez également consulter la démo ici :

http://eligrey.com/demos/FileSaver.js/

Répondu el 15 de Novembre, 2012 par lostsource (6182 Points )

41 votes

w3.org/TR/file-writer-api/#the-filesaver-interface dit "Le travail sur ce document a été interrompu et il ne doit pas être référencé ou utilisé comme base pour la mise en œuvre".

Commenté el 8 de Juin, 2015 par Godsmith

0 votes

"met en œuvre le w3C saveAs" ??? Qu'est-ce que c'est ? La démo est inutile, pas de code.

Commenté el 15 de Mars, 2017 par CashCow

2 votes

Tout le code est disponible dans le git, comme on peut s'y attendre. Je ne suis pas sûr de l'objectif du commentaire "qu'est-ce que c'est ?". Si c'était vraiment pour savoir ce que c'est, alors w3.org/TR/file-writer-api aiderait. Si c'était pour signaler que le projet a été annulé, cette information se trouve dans le README du git.

Commenté el 25 de Décembre, 2017 par WesR

Afficher 1 autres commentaires

Answer 5

42voto

Matt Greer Points 29401

Il n'est pas possible de choisir l'emplacement où enregistrer le fichier avant de le créer. Mais il est possible, du moins dans Chrome, de générer des fichiers en utilisant uniquement JavaScript. Voici un de mes anciens exemples de création d'un fichier CSV. L'utilisateur sera invité à le télécharger. Malheureusement, cela ne fonctionne pas bien dans d'autres navigateurs, notamment IE.

<!DOCTYPE html>
<html>
<head>
    <title>JS CSV</title>
</head>
<body>
    <button id="b">export to CSV</button>
    <script type="text/javascript">
        function exportToCsv() {
            var myCsv = "Col1,Col2,Col3\nval1,val2,val3";

            window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
        }

        var button = document.getElementById('b');
        button.addEventListener('click', exportToCsv);
    </script>
</body>
</html>

Répondu el 15 de Novembre, 2012 par Matt Greer (29401 Points )

1 votes

Lorsque je l'utilise, il ouvre un nouvel onglet contenant le texte, mais pas une fenêtre de dialogue de fichier.

Commenté el 15 de Novembre, 2012 par user1756980

0 votes

@user1756980 - Oui. Vous devez "Enregistrer dans un fichier" à partir de ce nouvel onglet.

Commenté el 22 de Juillet, 2014 par Jesse Chisholm

0 votes

Cela dépend du navigateur, du système d'exploitation, etc. Au moment où j'ai écrit cette réponse, une url de données csv dans Chrome faisait apparaître une boîte de dialogue d'enregistrement.

Commenté el 22 de Juillet, 2014 par Matt Greer

Afficher 1 autres commentaires

Answer 6

15voto

Noel Ott Points 121

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}

<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.json', 'text/json')">Create file</button>

Je pense que cela peut fonctionner avec des fichiers json aussi si vous changez le type mime.

Répondu el 10 de Février, 2020 par Noel Ott (121 Points )

JavaScript : Créer et enregistrer un fichier

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

JavaScript : Créer et enregistrer un fichier

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: