JavaScript generated download?

Question

Is there a way in JavaScript to generate a downloadable PDF or any other file that can contain images and text? I am working on a strange project that requires this functionality. The JavaScript is embedded in a locally stored webpage, I have complete control over the user's environment. Is there a way to somehow run local processes with JavaScript if I configure local security settings one way or another? Anyways, the reason I ask is as follows, here is my project and where I am sort of hung up on...

I have a script that walks a filesystem on a partition that a user selects when they run the script. The script then takes the list of all files and generates thumbnail files of all image files found from the filesystem walk. These thumbnails are then generated into an HTML page which is then opened by the script in firefox. I have JavaScript in the page generated by the script that allows the user to check and uncheck checkboxes next to each thumbnail. The goal being that once the user selects all of the images they are interested in, they can press a button to generate a report of the images they selected. I am not sure how to generate said report. I saw a question similar to mine answered with jsPDF but i'm not sure if that's the best solution for my situation? I am just looking for ideas and suggestions! I am open to learning other scripting methods if need be. A server side solution could be considered, but I would like to stay away from any local servers, etc etc (like PHP and stuff.).

Could you provide a link to the answer with jsPDF? (I just want to make sure that my answer isn't the same thing.) — forivall, Dec 21 '12 at 02:39
Sure thing ole chap, http://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript — 0xhughes, Dec 21 '12 at 02:50
May I ascertain to as why the downvotes? Did I post something wrong? — 0xhughes, Dec 21 '12 at 14:21

score 2 · Accepted Answer · answered Dec 21 '12 at 02:36

2

You can use a data: uri for this purpose and then use the HTML5 download attribute to make it easy to download. Unfortunately, only Chrome currently supports the download attribute. (although support is reportedly coming in Firefox 20). Without the download attribute, the user can still right click to save.

Here's a great example of this technique at work.

answered Dec 21 '12 at 02:36

forivall

9,504
2
33
58

I reeeaaaaaaalllllllllllyyyy like this. Spot on! chip chip cheerio – 0xhughes Dec 21 '12 at 02:52
As it stands this looks to be the most inline with what i'm looking for, getting Chrome for the user is NOT a problem as I can call it with the script and all that good stuff. Just need to educate myself on data: uri and all that good stuff, i'm excited to try this! Thanks! – 0xhughes Dec 21 '12 at 03:03

score 1 · Answer 2 · answered Dec 21 '12 at 02:22

1

Javascript in the browser is heavily sandboxed for security. There's no way you can make a call from JS to spawn a local process directly. In your case, it sounds like you're also running not a server, but creating a static site via your script.

I'd heavily recommend running a local server instead - perhaps even within the script, using something like Flask, a great micro-server framework in Python. That way, your Javascript will be able to interface with your "server" (which is just your script), which can then generate the PDF on the fly as necessary.

answered Dec 21 '12 at 02:22

Peter Sobot

2,476
21
20

I'll definitely check out Flask, I just try to shy away from services/servers running on the local machine, the audience using this (considering anyone ever dig my project!) would range in computer literacy. From 0 to 100. I am trying to dummy proof it, I just know somehow if I ran a local service/server the 0-10 guys would bork it somehow... haha. I'll do some testing anyways. I read ya on the sandboxing, that's whay I suspected. I just didn't know if I could do anything to change that because I have complete control of the local enviroment. – 0xhughes Dec 21 '12 at 02:31

score 1 · Answer 3 · answered Dec 21 '12 at 02:26

If you cooperate with your server, you can send the contents of the file in a request to the server in a hidden iframe, and have the server just echo that file back with a header marking it as a download.

However, there seems to be no way to just generate a file in javascript and save to the user's machine with a "save as" dialog. It looks like there is an API in the works for this, but I don't think it's ready yet.

One other, horribly inelegant option would be to pop up an alert window with svg code (basically XML, so you can build it with no extra libraries needed) and tell the user to copy and paste into Notepad and save as a .svg.

JavaScript generated download?

3 Answers3