Geek Answers Handbook

Creating an export function using JavaScript?

I am trying to configure a JavaScript export function for a packaged web application that converts a string stored in localStorage into a plain text file for loading. Since JavaScript does not have access to the computer file system of the computer, I would like to configure it so that it creates an empty text file (or, if it is not, a simple HTML page) and opens in a web browser; since it will not access file systems, I was hoping it would be possible.

I was thinking of using a data URI scheme to open localStorage in plain text, for example:

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

But this is much slower than I expected, which I think is due to the fact that it inserts the entire document into the URL field. Although this is probably not a problem with the code, some web browsers such as Google Chrome will not allow me to save the resulting file. (And for some reason, all line breaks turned into spaces ....)

Any suggestions for resolving these problems or improving ways to perform such a function would be greatly appreciated!

+4
source share
3 answers

You tried something like:

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

For the download, I assume that you need a round trip to the server, which will set the mime / type type, which will make the download window appear.

EDIT :
If you use localStorage , localStorage may be available in your environment and may help in speed.

+2
source

To save line breaks in data exported with window.open, you can wrap your data with encodeURI:

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

Otherwise, you can export your base64 encoded data using the btoa function:

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

This is actually not a solution, but a job, but your question and answer from @Mic led me along this path:

Just use data:text/html so you can put line breaks with <br />

  • I tried everything else (all combinations of Unicode characters, etc.) to get line breaks in text/plain , but couldn't get them to display. document.write() and document.body.textContent() , etc. also suffer from the same problem. Line breaks are simply ignored.
  • Since Chrome will not allow you to save the popup anyway, the only way to get the text from it is to copy and paste, so there is no benefit in using text/plain over text/html
  • In web browsers that allow you to save the page (Firefox), you can save the page as text, not HTML, and therefore you will still get the same end result.

EDIT: This approach works in Chrome, but not in Firefox

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

I have to use innerText . InnerHTML or textContent remove line breaks. This works on both:

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

So, maybe you could just wrap everything in <pre> tags? Although I think that both of them have the same "problem" as "
"because it actually creates an HTML document, not a text / plain one.

0
source

More articles:


All Articles