Existe-t-il un moyen de créer un fichier texte côté client et d'inviter l'utilisateur à le télécharger, sans aucune interaction avec le serveur? Je sais que je ne peux pas écrire directement sur leur machine (sécurité et tout), mais puis-je créer et leur demander de l'enregistrer?

Vous pouvez utiliser des URI de données. La prise en charge du navigateur varie; voir Wikipedia . Exemple:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Le flux d'octets doit forcer une invite de téléchargement. Sinon, il s'ouvrira probablement dans le navigateur.

Pour CSV, vous pouvez utiliser:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Essayez la démo jsFiddle .

Solution simple pour les navigateurs compatibles HTML5 ...

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

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Usage

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

Toutes les solutions ci-dessus ne fonctionnaient pas dans tous les navigateurs. Voici ce qui fonctionne finalement sur IE 10+, Firefox et Chrome (et sans jQuery ni aucune autre bibliothèque):

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

Notez que, selon votre situation, vous pouvez également appeler URL.revokeObjectURL après la suppression elem. Selon les documents pour URL.createObjectURL :

Chaque fois que vous appelez createObjectURL (), une nouvelle URL d'objet est créée, même si vous en avez déjà créé une pour le même objet. Chacun d'eux doit être libéré en appelant URL.revokeObjectURL () lorsque vous n'en avez plus besoin. Les navigateurs les publieront automatiquement lorsque le document sera déchargé; cependant, pour des performances et une utilisation de la mémoire optimales, s'il y a des moments sûrs où vous pouvez les décharger explicitement, vous devez le faire.

Tous les exemples ci-dessus fonctionnent très bien dans Chrome et IE, mais échouent dans Firefox. Veuillez envisager d'ajouter une ancre au corps et de la retirer après avoir cliqué.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

J'utilise volontiers FileSaver.js . Sa compatibilité est assez bonne (IE10 + et tout le reste), et il est très simple à utiliser:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

La méthode suivante fonctionne dans IE11 +, Firefox 25+ et Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

Voir ceci en action: http://jsfiddle.net/Kg7eA/

Firefox et Chrome prennent en charge l'URI de données pour la navigation, ce qui nous permet de créer des fichiers en naviguant vers un URI de données, tandis qu'IE ne le prend pas en charge à des fins de sécurité.

D'un autre côté, IE a une API pour enregistrer un blob, qui peut être utilisée pour créer et télécharger des fichiers.

Cette solution est extraite directement du référentiel github de tiddlywiki (tiddlywiki.com). J'ai utilisé tiddlywiki dans presque tous les navigateurs et cela fonctionne comme un charme:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Repo Github: Télécharger le module d'économiseur

Solution qui fonctionne sur IE10: (j'avais besoin d'un fichier csv, mais il suffit de changer le type et le nom de fichier en txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Si vous voulez simplement convertir une chaîne pour qu'elle soit disponible en téléchargement, vous pouvez essayer ceci en utilisant jQuery.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

Le package js-file-download depuis github.com/kennethjiang/js-file-download gère les cas marginaux pour la prise en charge du navigateur:

Voir la source pour voir comment il utilise les techniques mentionnées sur cette page.

Installation

yarn add js-file-download
npm install --save js-file-download

Usage

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')

Comme mentionné précédemment, l' économiseur de fichiers est un excellent package pour travailler avec des fichiers côté client. Mais ce n'est pas bien avec les gros fichiers. StreamSaver.js est une solution alternative (indiquée dans FileServer.js) qui peut gérer des fichiers volumineux:

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

Depuis avril 2014, les API FileSytem peuvent ne pas être standardisées dans le W3C. Quiconque regarde la solution avec blob devrait fileter avec prudence, je suppose.

HTML5 prend la tête

Liste de diffusion W3C sur l'API FileSytem

Sur la base de la réponse @Rick qui a été vraiment utile.

Vous devez scape la chaîne datasi vous souhaitez la partager de cette façon:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`Désolé, je ne peux pas commenter la réponse de @ Rick en raison de ma faible réputation actuelle dans StackOverflow.

Une suggestion de modification a été partagée et rejetée.

Nous pouvons utiliser l' API URL , en particulier URL.createObjectURL () , et l' API Blob pour encoder et télécharger à peu près n'importe quoi.

Si votre téléchargement est petit, cela fonctionne bien:

document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>`
download.click()
download.outerHTML = ""

Si votre téléchargement est énorme, au lieu d'utiliser le DOM, une meilleure façon est de créer un élément de lien avec les paramètres de téléchargement et de déclencher un clic.

Notez que l'élément de lien n'est pas ajouté au document mais le clic fonctionne quand même! Il est possible de créer un téléchargement de plusieurs centaines de Mo de cette façon.

const stack = {
 some: "stuffs",
 alot: "of them!"
}

BUTTONDOWNLOAD.onclick = (function(){
  let j = document.createElement("a")
  j.id = "download"
  j.download = "stack_"+Date.now()+".json"
  j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
  j.click()
})  

<button id="BUTTONDOWNLOAD">DOWNLOAD!</button>

Prime! Téléchargez tous les objets cycliques , évitez les erreurs:

TypeError: valeur d'objet cyclique (Firefox) TypeError: conversion

structure circulaire à JSON (Chrome et Opera) TypeError: Circular

référence dans l'argument valeur non prise en charge (Edge)

En utilisant https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

Sur cet exemple, le téléchargement du document objet en tant que json.

/* JSON.decycle */
if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)}
if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}}
objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})}
return nu}
return value}(object,"$"))}}


document.body.innerHTML += 
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>`
download.click()

Vous pouvez même faire mieux que les URI - en utilisant Chrome, vous pouvez également suggérer le nom que le fichier prendra, comme expliqué dans ce billet de blog sur le nom d'un téléchargement lors de l'utilisation d'URI .

Cette fonction ci-dessous a fonctionné.

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

La méthode suivante fonctionne dans IE10 +, Edge, Opera, FF et Chrome:

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

Alors, appelez simplement la fonction:

saveDownloadedData('test.txt', 'Lorem ipsum');

Pour moi, cela fonctionnait parfaitement, avec le même nom de fichier et la même extension téléchargés

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

'title' est le nom de fichier avec l' extension c. -à- sample.pdf, waterfall.jpg, etc ..

'file64' est le contenu base64 quelque chose comme ça, c'est-à-dire Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

J'utiliserais une <a></a>balise puis définirais le href='path'. Ensuite, placez une image entre les <a>éléments afin que je puisse avoir un visuel pour la voir. Si vous le souhaitez, vous pouvez créer une fonction qui changera le hrefafin que ce ne soit plus seulement le même lien mais dynamique.

Donnez également <a>une balise idsi vous souhaitez y accéder avec javascript.

À partir de la version HTML:

<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor">
     <img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>

Maintenant avec JavaScript:

*Create a small json file*;

const array = [
     "mp3/tupac_shakur-how-do-you-want-it.mp3",
     "mp3/spice_one-born-to-die.mp3",
     "mp3/captain_planet_theme_song.mp3",
     "mp3/tenchu-intro.mp3",
     "mp3/resident_evil_nemesis-intro-theme.mp3"
];

//load this function on window
window.addEventListener("load", downloadList);

//now create a function that will change the content of the href with every click
function downloadList() {
     var changeHref=document.getElementById("mp3Anchor");

     var j = -1;

     changeHref.addEventListener("click", ()=> {

           if(j < array.length-1) {
               j +=1;
               changeHref.href=""+array[j];
          }
           else {
               alert("No more content to download");
          }
}

Si le fichier contient des données textuelles, une technique que j'utilise est de placer le texte dans un élément textarea et de le faire sélectionner par l'utilisateur (cliquez dans textarea puis ctrl-A) puis copiez puis collez-le dans un éditeur de texte.