Créer une fonction d'export avec JavaScript?

Question

J'essaie de configurer une fonction d'exportation en JavaScript pour une application web packagée qui transforme une chaîne stockée dans localStorage en un fichier texte en clair pour le téléchargement. Comme JavaScript n'a pas accès au système de fichiers de l'ordinateur, je voudrais le configurer pour qu'il crée un fichier texte vide (ou, à défaut, une simple page HTML) et qu'il s'ouvre dans le navigateur Web; Comme il n'accéderait à aucun système de fichiers, j'espérais que ce serait possible.

Je pensais à l'aide d'un schéma d'URI de données pour ouvrir la localStorage sous forme de texte, telles que les suivantes:

function exportFile() { 
window.open("data:text/plain;charset=utf-8," + localStorage.WebAppData); 
}; 

Mais il est beaucoup plus lent que prévu, que je suppose est parce qu'il est de coller l'ensemble document dans la zone URL. Bien que ce ne soit probablement pas un problème avec le code, certains navigateurs Web, comme Google Chrome, ne me permettent pas de sauvegarder le fichier résultant. (Et pour une raison quelconque tous les sauts de ligne sont devenus des espaces ....)

Toutes les suggestions pour résoudre ces problèmes ou de meilleures façons de faire une fonction similaire seront grandement appréciées!

Answer 1

Avez-vous essayé quelque chose comme:

window.open("data:text/plain;charset=utf-8," + localStorage.WebAppData); 

Pour le téléchargement, je suppose que vous avez besoin d'un aller-retour à un serveur, qui établira un mime/type qui fera la boîte de téléchargement pour faire apparaître.

EDIT:
Si vous utilisez localStorage, peut-être window.postMessage est disponible dans votre environnement et pourrait aider à la vitesse.

Answer 2

Non vraiment une solution, plutôt un travail autour, mais votre question et la réponse par @Mic me conduire dans cette voie:

il suffit d'utiliser data:text/html comme vous pouvez mettre en sauts de ligne à l'aide <br />

1. J'ai essayé tout le reste (toutes les combinaisons de caractères Unicode, etc.) pour obtenir des sauts de ligne dans text/plain mais je n'ai pas pu les faire apparaître. document.write() et document.body.textContent(), etc souffrent également du même problème. Les sauts de ligne sont simplement ignorés.
2. Puisque Chrome ne vous laissera pas enregistrer la fenêtre pop-up de toute façon, la seule façon d'obtenir un texte sur celui-ci est copier-coller donc il n'y a aucun avantage de l'utilisation text/plain sur text/html
3. Dans les navigateurs web qui vous permettra de sauvegarder la page (Firefox) vous pouvez choisir d'enregistrer la page en tant que texte, plutôt qu'en HTML et ainsi vous obtenez toujours le même résultat final.

EDIT: Cette approche fonctionne dans Chrome, mais pas Firefox

win = window.open("", "win") 
win.document.body.innerText = "Line \n breaks?" 

doivent utiliser innerText bien. InnerHTML ou textContent supprime les sauts de ligne. Cela fonctionne aussi bien sur:

win = window.open("", "win") 
win.document.body.innerHTML = "<pre>Line \n breaks?</pre>" 

Alors peut-être vous pouvez simplement envelopper tout <pre> étiquettes? Bien que je suppose que les deux ont le même "problème" que la suggestion "
" en ce sens qu'il est en train de créer un document HTML plutôt qu'un texte/plaine.

Answer 3

Afin de conserver les sauts de ligne-dans les données exportées avec window.open vous pouvez envelopper vos données avec encodeURI:

var data1 = "Line \n break. And \r\n another one"; 
window.open("data:application/octet-stream, " + encodeURI(data1)); 

Sinon, vous pouvez exporter vos données codées en base64 avec la fonction btoa:

var data1 = "Line \n break. And \r\n another one"; 
window.open("data:application/octet-stream;base64, " + btoa(data1));