JavaScript: Créer et enregistrer le fichier

J'ai des données que je veux écrire dans un fichier, et d'ouvrir une boîte de dialogue de fichier pour l'utilisateur de choisir où enregistrer le fichier. Ce serait formidable si elle a travaillé dans tous les navigateurs, mais il a de travailler dans google Chrome. Je veux faire cela tous les côté client.

Fondamentalement, je voudrais savoir quoi mettre dans cette fonction:

saveFile: function(data)
{
}

Où la fonction prend dans les données, a l'utilisateur de sélectionner un emplacement pour enregistrer le fichier, et crée un fichier dans l'emplacement avec les données.

À l'aide de HTML est bien aussi, si ça peut aider.

"Fondamentalement, je voudrais savoir quoi mettre dans cette fonction:", à l'essence de chaque bonne question!
A été une copie exacte de Créer un fichier dans la mémoire de l'utilisateur à télécharger, pas par le serveur pendant des années.

InformationsquelleAutor user1756980 | 2012-11-15

221

Une très légère amélioration de la code par Awesomeness01 (pas besoin de balise d'ancrage) avec plus comme suggéré par trueimage (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 est ouverte dans un nouvel onglet et on aurait à enregistrer manuellement ce fichier.
- Plus précisément quelle version de IE?
- Actuellement, il ne fonctionne pas dans n'importe quelle version de IE, autant que je sache. Safari peut-être pas non plus, mais je ne travaille pas avec ceux-ci et je voudrais avoir à le rechercher.
- Ne fonctionne pas sous 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; }
- Ce n'est pas de travail dans IE 11.0.9600.18426, mais il fonctionne dans Chrome 52.0.2743.116 m. Toutes les idées pour le faire fonctionner dans internet explorer 11?
- Pour qu'il fonctionne dans IE 11 et Chrome, j'ai remplacé le un.href ligne avec: if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(fichier, nom); } else { un.href = URL.createObjectURL(fichier); }
- Un Plunk woudl ont été de nice
- Me semble que var a = document.createElement("a") devrait être dans le else branche, sinon, IE10+ va créer, mais pas supprimer le point d'ancrage (<a>) de l'élément.
- Cette solution doit être vraiment accepté. J'ai créé un repo pour quelqu'un qui veut essayer cette solution. github.com/slavede/ajax-js-download Il utilise mentionné logique. Je l'ai testé dans le dernier Chrome, FF, Edge et Safari.
- Semble ne pas fonctionner dans Safari, tout ne se passe rien (pas de sauvegarde)
- Juste pour faire de votre code un peu plus propre, ne var file = new Blob([data], {type});
- Comment définir l'emplacement dans ce script quand le téléchargement?
InformationsquelleAutor Kanchu
126

Ce projet sur github a l'air prometteur:

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

FileSaver.js met en œuvre le W3C saveAs() FileSaver interface
les navigateurs qui ne supporte pas cela.

Également jeter un oeil à la démo ici:

http://eligrey.com/demos/FileSaver.js/
- w3.org/TR/file-writer-api/#the-filesaver-interface, dit "le Travail sur ce document a été abandonné et il ne devrait pas être référencés ou utilisé comme une base pour la mise en œuvre."
- "implémente le w3C enregistrer sous"??? Qu'est-ce que cela? La démo est inutile, pas de code.
- Tout le code est disponible dans le dépôt git, comme on pourrait le penser. Pas sûr de ce que le but de la "qu'est-ce?" en commentaire. Si c'était vraiment vouloir savoir ce que c'est alors w3.org/TR/file-writer-api pourrait l'aider. Si c'était de souligner que le projet a été annulé, que l'information est dans le README du git.
- Je ne pense pas que les questions qu'elle apparaît à un repli vers le createObjectURL ou quelle que soit la méthode fonctionne pour enregistrer un fichier, et gère les différences de navigateurs du mieux qu'il peut.
InformationsquelleAutor lostsource
120

JS:
```
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;
}
```
HTML:
```
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>
```
Et il vous faudra alors télécharger le fichier en mettant le téléchargement de l'attribut de la balise d'ancrage.

La raison pour laquelle j'aime mieux cela que la création de données d'url, c'est que vous n'avez pas à faire un gros url longue, vous pouvez tout simplement de générer une url temporaire.
- Vous devriez vérifier si le navigateur prend en charge de certains objets. Exemple de détection: if("URL"in window&&"createObjectURL"in URL&&"download"in Element.prototype): autre personne, puis il suffit de changer la méthode de téléchargement ou de l'avis que le navigateur ne prend pas en charge les objets requis pour télécharger le fichier.
- Dans firefox, cela fonctionne si vous cliquez sur le lien, mais si vous faites un clic droit et choisissez Enregistrer la cible du Lien Sous... rien ne se passe.
InformationsquelleAutor Awesomeness01
38

Le choix de l'emplacement pour enregistrer le fichier avant de créer, il n'est pas possible. Mais il est possible, au moins en Chrome, pour générer des fichiers à l'aide de JavaScript. Voici un vieil exemple de la mine de création d'un fichier CSV. L'utilisateur sera invité à le télécharger. Cela, malheureusement, ne fonctionne pas bien dans d'autres navigateurs, en particulier 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>
```
- Quand je l'utilise il ouvre un nouvel onglet avec le texte qu'il contient, il n'a pas d'ouvrir un fichier de la fenêtre de dialogue.
- Oui. Vous auriez besoin de les "Enregistrer sous" à partir de ce nouvel onglet.
- Il dépend du navigateur, système d'exploitation, etc. Au moment où j'ai écrit la réponse, un csv de données d'url dans le navigateur Chrome pop une boîte de dialogue enregistrer
- vous pouvez le faire en javascript. il suffit de créer une balise d'ancrage dans une variable et de mettre le téléchargement attribut (comme: une.télécharger = "downloadname.txt") puis cliquer sur le avec un.cliquez sur().
- Merci. Donc, beaucoup de nouveaux HTML5 changements à apprendre.
InformationsquelleAutor Matt Greer

JS:

setTimeout("create('Hello world!', 'myfile.txt', 'text/plain')");
function create(text, name, type) {
  var dlbtn = document.getElementById("dlbtn");
  var file = new Blob([text], {type: type});
  dlbtn.href = URL.createObjectURL(file);
  dlbtn.download = name;
}

HTML:

<a href="javascript:void(0)" id="dlbtn"><button>click here to download your file</button></a>

InformationsquelleAutor Samuel Tees

Essayez d'utiliser ce qu'il télécharge le fichier et tout ce que vous avez à faire est de modifier les attributs onclick.

JS:

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

CSS:

#a { display: none; }

HTML:

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

InformationsquelleAutor boomcreeper11

13

Pour les plus récentes des navigateurs comme google Chrome, vous pouvez utiliser le Fichier API comme dans ce tutoriel:
```
window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);
```
- Je pense que ce bout de code serait plus proche de la personne de l'intention.
- Voir ici la preuve de son insensibilité mortelle: lists.w3.org/Archives/Public/public-webapps/2014AprJun/...
InformationsquelleAutor pdjota

Essayé ceci dans la console, et ça fonctionne.

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); //the blob
window.open(URL.createObjectURL(oMyBlob));

InformationsquelleAutor Netsi1964

6

Vous ne pouvez pas le faire uniquement en Javascript. Le code Javascript s'exécutant sur les navigateurs n'ont pas assez d'autorisation pour l'instant (il y a des propositions) pour des raisons de sécurité.

Au lieu de cela, je vous conseille d'utiliser Downloadify:

Un petit javascript + Flash bibliothèque qui permet la création et le téléchargement de fichiers texte sans serveur d'interaction.

Vous pouvez voir une simple démo ici où vous fournissent le contenu et pouvez tester l'enregistrement/annulation/fonctionnalité de gestion d'erreur.

InformationsquelleAutor Aamir
2

Pour Chrome et Firefox, j'ai été en utilisant un purement méthode JavaScript.

(Mon application ne peut pas utiliser un package comme Blob.js parce qu'il est servi à partir d'un moteur spécial: un DSP avec un WWWeb serveur entassés dans et peu de place pour quoi que ce soit.)
```
function FileSave(sourceText, fileIdentity) {
    var workElement = document.createElement("a");
    if ('download' in workElement) {
        workElement.href = "data:" + 'text/plain' + "charset=utf-8," + escape(sourceText);
        workElement.setAttribute("download", fileIdentity);
        document.body.appendChild(workElement);
        var eventMouse = document.createEvent("MouseEvents");
        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        workElement.dispatchEvent(eventMouse);
        document.body.removeChild(workElement);
    } else throw 'File saving not supported for this browser';
}
```
Notes, mises en garde, et la belette-mots:
- J'ai eu du succès avec ce code dans Chrome et Firefox les clients exécutant sous Linux (Maipo) et Windows (7 et 10) les environnements.
- Toutefois, si sourceText est plus gros qu'un MO, Chrome parfois (parfois seulement) est coincé dans son propre télécharger sans aucune indication d'échec; Firefox, jusqu'à présent, n'a pas exposé ce problème. La cause pourrait être une goutte limitation dans google Chrome. Franchement, je ne sais pas; si quelqu'un a des idées sur la façon de corriger (ou détecter au moins), veuillez les poster. Si le téléchargement anomalie se produit, lorsque le Chrome, le navigateur est fermé, il génère un diagnostic tels que
- Ce code n'est pas compatible avec le Bord ou à Internet Explorer; je n'ai pas essayé Opera ou Safari.
InformationsquelleAutor We B Martians
1

Javascript a un système de fichiers de l'API. Si vous pouvez traiter avec la fonction de travail uniquement dans Chrome, un bon point de départ serait: http://www.html5rocks.com/en/tutorials/file/filesystem/.

InformationsquelleAutor Alok
0

StreamSaver est une alternative à enregistrer des fichiers très volumineux sans avoir à conserver toutes les données dans la mémoire.
En effet il émule tout le serveur de la dose lors de l'enregistrement d'un fichier, mais tous les côté client avec le service du travailleur.

Vous pouvez obtenir soit l'écrivain et écrire manuellement Uint8Array est à elle ou d'un tuyau, d'un binaire readableStream à l'écriture de flux

Il y a quelques exemple de la présentation:
- Comment faire pour enregistrer plusieurs fichiers zip
- de la tuyauterie d'un readableStream eg Response ou blob.stream() à StreamSaver
- l'écriture manuelle à l'écriture de flux que vous tapez quelque chose
- ou recoder un vidéo/audio
Voici un exemple dans sa forme la plus simple:
```
const fileStream = streamSaver.createWriteStream('filename.txt')

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)
```
Si vous souhaitez enregistrer un blob vous convertir un readableStream
```
new Response(blob).body.pipeTo(...) //response hack
blob.stream().pipeTo(...) //feature reference
```
- Cela ressemble à un très utile de la bibliothèque. Merci!!!!
InformationsquelleAutor Endless

function SaveBlobAs(blob,file_name){
if(typeof navigator.msSaveBlob=="function")return navigator.msSaveBlob(blob,file_name);
var saver=document.createElementNS("http://www.w3.org/1999/xhtml","a");
saver.download=file_name;
var blurl=saver.href=URL.createObjectURL(blob),bdy=document.body;
bdy.appendChild(saver);
saver.dispatchEvent(new MouseEvent("click"));
bdy.removeChild(saver);
URL.revokeObjectURL(blurl);
}

InformationsquelleAutor user12066722

Vous devez vous connecter pour publier un commentaire.