“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.

Advertisements

30 comments

  1. 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!

  2. 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();
    }

  3. 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

  4. 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

  5. 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

  6. 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

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

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

  9. 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!”);

  10. 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>

  11. Hi!
    Found this code and is useful but got a question.

    Is it possible to append the saved html file when new data is submitted?

    cheers.

  12. I hv to saving all images file as pdf file.
    Is there any javascript code for it.
    plz help me if u can…..

  13. Pingback: Dish network

  14. Pingback: ThamKhao.vn - Thư viện tham khảo

  15. Hmm is anyone else having problems with the images on this blog loading?

    I’m trying to determine if its a problem on my end or if it’s the blog.

    Any feed-back would be greatly appreciated.

  16. I really like your blog.. very nice colors & theme.
    Did you make this website yourself or did you hire someone to do it for you?

    Plz respond as I’m looking to create my own blog and would like to know where u got
    this from. thanks

  17. Hi dsgdev
    This code seems to work very good in my scenario. I have just one problem remaining. The “fso.CreateTextFile(..)” is giving me access denied to file system error, when I debug my javascript. Basically my security settings in IE 11 does not allow an active X control to write file to a path in any drive(not only C). I am simply running an HTML file from my own PC. I am not able to figure this out. Please help.

  18. I’ve learn a few just right stuff here. Certainly value bookmarking for revisiting.
    I wonder how much attempt you set to make this kind of fantastic informative website.

  19. Heya this is somewhat of off topic but I was wanting
    to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding expertise so I wanted to get advice from someone with experience.
    Any help would be greatly appreciated!


Comments are closed.