« Simple Div Scrolling
My slideshow application for a Web 2.0 Office »

“Save as” real data when the page is generated with Javascript document.write

I ran into an interesting problem today that involved the need to “Save as” a web page that is 99% generated with Javascript document.writes. Of course, saving this page will give you only the javascript code, not what you are seeing on the screen - in my case, lots of table rows created by parsing a text file.

Having javascript read in a text file meant I was doing everything local, using FileSystemObject, so that was (A) Why I could not use a server side language to generate the file, and (B) good that I had the proper security to read and write files.

I found a lot of people pulling their hair out over this and no real solution. If you are working locally, can use FileSystemObject and need to save actual data, not javascript document.writes, then I think this may help you.

First off, I import my text file, parse the data, and document.write it into tables, such as:

document.write("<tr'>");
document.write(” <td valign=’top’>”+(i+1)+”</td>”);
document.write(” <td valign=’top’>”+sfc[0]+”</td>”);
document.write(” <td valign=’top’>”+sfc[1]+”</td>”);
document.write(” <td valign=’top’>”+sfc[2]+”</td>”);
document.write(”</tr>”);

On screen, I may get something like:

1 01-002 Artist Need to remove border from the image.
2 01-003 Programmer Make the next link disabled until they click on ‘Note’
3 01-003 Programmer Change the direction text to “Continue” when they click on ‘Note’

But if I try to save that page to the desktop, I get the javascript document.writes listed above… until you do this:

Surround your javascript with a div and give it an ID:

<body>
<div id=”content”>
<script>
//… tons of JS code to parse and write your document.
</script>
</div>
</body>

Now, right after that div, call a function and pass it the div’s innerHTML:

<body>
<div id=”content”>
<script>
//… tons of JS code to parse and write your document.
</script>
</div>
<script>
saveHTML(document.getElementById(’content’).innerHTML);
</script>
</body>

This is going to take the HTML contained within the div and send it to a function. It sends the javascript code, but also it sends the generated HTML table. Perfect! Now, in that function, I split the code on the closing </script> tag to get rid of all my JS code, and wrap what’s left in simple html, head, body tags and write a new .html file.

Now, all we have to do is redirect. So after our call to saveHTML, add:

<body>
<div id=”content”>
<script>
//… tons of JS code to parse and write your document.
</script>
</div>
<script>
saveHTML(document.getElementById(’content’).innerHTML);
document.location.href = html;
</script>
</body>

Oh, and the variable ‘html’ is just the location/filename I use to write the file to, and now redirect to. For instance

var html = “c://some/directory/to/write/to.html”

Now, once we redirect, we are on a true HTML page with no content being generated by Javascript and we can successfully “Save as” and have a document with actual data in it.

Hope this helps.

Possibly related posts: (automatically generated)

This entry was posted on September 27, 2006 at 4:04 pm and is filed under Code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to ““Save as” real data when the page is generated with Javascript document.write”

  1. tmm Says:
    October 19, 2006 at 9:12 am

    thank you, thank you, now even I can do it, and I need to.
    tmm

  2. dsgdev Says:
    October 19, 2006 at 12:27 pm

    You’re welcome, and good luck with your project.

  3. ray Says:
    March 23, 2007 at 6:05 am

    Hi dsgdev!

    (silly question by non-JS programmer)

    Is the “saveHTML(…)” function you describe above,
    a JS native function or must it be coded by hand?

    Thanks!

  4. dsgdev Says:
    March 23, 2007 at 7:57 am

    Hey Ray,

    The saveHTML is a function you will need to write and it will look something like this:


    function saveHTML(thisContent){
    // The content will have the javascript code and generated HTML code.
    // Split it at the end of the Javascript code.
    thisContentArray = thisContent.split("<\/SCRIPT>");
    // The content we want is now in thisContentArray[1]
    // Now, write a simple HTML page
    newContent = “<html>\r\n”;
    newContent+= ” <head>\r\n”;
    newContent+= ” <title>Comments<\/title>\r\n”;
    newContent+= ” <\/head>\r\n”;
    // Drop in the content
    newContent+= ” <body>”+thisContentArray[1]+”<\/body>\r\n”;
    newContent+= “<\/html>”;
    // and save…
    var s = FSO.CreateTextFile(html, 2);
    s.WriteLine(newContent);
    s.Close();
    }

  5. ajay Says:
    May 24, 2007 at 6:04 am

    Is it possible to save image contents through this method.
    how can i create image file through the ‘File’ object.
    pls provide me solution soon

  6. ajay Says:
    May 24, 2007 at 6:10 am

    your method is working fine on .txt file but my case is differet

    let’s familiar first with my problem.we have a image which is modified so many times(add border,put some text on it or etc..) and then i want to save this particular image for future retreival on this page.

    how can i achieve this

  7. Ajay yadav Says:
    May 24, 2007 at 11:14 pm

    your method is working fine on .txt file but my case is differet

    let’s familiar first with my problem.we have a image which is modified so many times(add border,put some text on it or etc..) and then i want to save this particular image for future retreival on this page.

    how can i achieve this

  8. Andres Says:
    October 30, 2007 at 3:31 pm

    Hi!
    great work
    the only thing I couldn’t figure out is the FSO part in:

    var s = FSO.CreateTextFile(html, 2);

    it’s something like File Save Object?

    thanx

  9. Andres Says:
    October 30, 2007 at 3:34 pm

    OMG
    it’s FileSystemObject, works only with IE?

  10. Melanie Fisher Says:
    March 25, 2008 at 10:18 pm

    bimester butoxy mooned scythe jonathanization sciaena unfamiliarity snooper
    Tickets 4 Millionaires
    http://www.berry-hill.com/

  11. Avery Wyatt Says:
    April 21, 2008 at 6:25 pm

    bimester butoxy mooned scythe jonathanization sciaena unfamiliarity snooper
    American Monetary Institute
    http://www.howstuffworks.com/gyroscope.htm

Leave a Reply