«
»

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

By dsgdev

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.

18 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 | Reply

    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 | Reply

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

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

    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 | Reply

    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 | Reply

    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 | Reply

    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 | Reply

    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 | Reply

    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 | Reply

    OMG
    it’s FileSystemObject, works only with IE?

  10. ламинат Says:
    August 25, 2008 at 12:44 am | Reply

    7uGood idea.0s I compleatly disagree with last post . dvc
    купить ламинат 8i

  11. cwxwwwxwwxwx Says:
    December 23, 2008 at 10:51 am | Reply

    well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  12. Ryan Says:
    May 24, 2009 at 9:11 pm | Reply

    It really useful work-around to get the scripts more automated. A work-around that I used up to now was to go to the physical address of .js file and to download it. This is indeed better.

  13. Jean-Philippe Says:
    June 3, 2009 at 9:12 pm | Reply

    Really simple ! Open the page in Firefox and save the page as a complete web page type.

  14. mru Says:
    July 9, 2009 at 4:26 pm | Reply

    thanks for that!

    my slightly modified version of the script:

    function save()
    {
    var fso = new ActiveXObject(“Scripting.FileSystemObject”);
    var url =document.URL;
    url = url.substring(url.lastIndexOf(‘\\’)+1,url.length);
    var s = fso.CreateTextFile(url, true);
    s.WriteLine(”);
    s.WriteLine(document.getElementById(‘myhtml’).innerHTML);
    s.WriteLine(”);
    s.Close();
    document.location.href = url;
    }

    document.write(“This is my first JavaScript!”);

  15. mru Says:
    July 9, 2009 at 4:42 pm | Reply

    one more time formatted:


    <html id=myhtml>
    <HEAD>
    <SCRIPT type=text/javascript>
      function save()
      {
         var fso = new ActiveXObject("Scripting.FileSystemObject");
         var url =document.URL;
         url = url.substring(url.lastIndexOf('\\')+1,url.length);
         var s = fso.CreateTextFile(url, true);
         s.WriteLine('<html id=myhtml>');
         s.WriteLine(document.getElementById('myhtml').innerHTML);
         s.WriteLine('</html>');
         s.Close();
         document.location.href = url;
      }
    </SCRIPT>
    </HEAD>
    <BODY>
      <SCRIPT type=text/javascript>
         document.write("This is my first JavaScript!<br>");
      </SCRIPT>
     <INPUT onclick=save(); type=button value=save> </BODY>
    </html>

  16. Vera Says:
    September 4, 2009 at 11:24 am | Reply

    HELP mE ?PLEASE?i can t write sms in odnoklassniki((

  17. Vera Says:
    September 4, 2009 at 11:25 am | Reply

    HELp ME please?i can t write sms v odnoklassnikax

  18. Musca Law Says:
    September 6, 2009 at 3:35 am | Reply

    How do I reset my password?
    Thanks
    Musca Law
    Musca Law

Leave a Reply