saving and printing a window created by Javascript

@karayanJul 11.2004

I want to write a script that creates a new window and places HTML code into it. I want the user to be able to save and print the result through the normal IE ways – menu selections, or whatever. However, I seem to remember that when in the past I tried that, it wouldn’t work. Javascript opened the new window, it populated it with HTML successfully, but if the user tried to save it, it would save an empty page. Am I missing something?

to post a comment

JavaScript

10 Comments(s) _↴

@Paul_JrJul 11.2004 — #[i]Originally posted by karayan [/i]

[B]I want to write a script that creates a new window and places HTML code into it. I want the user to be able to save and print the result through the normal IE ways - menu selections, or whatever. However, I seem to remember that when in the past I tried that, it wouldn't work. Javascript opened the new window, it populated it with HTML successfully, but if the user tried to save it, it would save an empty page. Am I missing something? [/B][/QUOTE]
[font=georgia]JavaScript is a client-side language, and thus cannot create, modify, or delete files on the server (well, basically any file at all). To do what you require, you are going to need to employ a server-side language, such as PHP, ASP, JSP, CF, and many others.[/font]

@karayanauthorJul 14.2004 — #No, I meant client-side files. Javascript will open a new window (window.open) and then the user will save it manually using the IE save-as menu option.

@JacksonCochraneJul 18.2004 — #Try this. It creates a printable version of selected content

on your HTML page. The user can then click print, or saveas

from the menubar of the new window. I have several variations

of this. Just place the content you want printed, betweent the

<Div> tags.

<HTML>

<Head>

<Script>

function printContent(ID){
 
   tmpStr = document.getElementById(ID).innerHTML;
   pWindow = window.open(); 
   pWindow.opener = self; 
   pWindow.document.open();
   pWindow.document.write(tmpStr);
   pWindow.document.close();
   tmpStr = "";
 
  }

</Script>

</Head>

<Body>

<Div align=center id='someData'>

<IMG Src='1.jpg' style="cursor:hand">

<p> This is some text</p>

</Div>

<br><br>

<center>

<Input type=button value='Print Content' onClick="printContent('someData')">

</center>

</Body>

</HTML>

@vwphillipsJul 18.2004 — #Interesting

I just tried this and can print the window content using the tool bar of the new window, however when I saveas the parent document is saved not the window.

must admit, I never knew that.

Jacksons code is also interesting but printing the window does not appear to be a problem

I am replying so I can keep an eye on the outcome if I cant find a solution

@JacksonCochraneJul 18.2004 — #I never noticed that problem about not being able to save the file.

This is the best I can do about that:

--------- Main Document -----------

<HTML>

<Head>

<Script language=JavaScript>

function printorSave(){
 
   tmpStr = xferData.innerHTML;
   pWindow = window.open("PrintorSave.html","tmpWindow","toolbar=0"); 
   pWindow.opener = self; 
   pWindow.xferContent.innerHTML = tmpStr;
   tmpStr = "";
  }

</Script>

</Head>

<Body>

<Div align=center id=xferData>

<Img Src='niagara.jpg'>

<p> This is some text</p>

</Div>

<br><br>

<center>

<Input type=button value='Click to Print or Save' onClick="printorSave()">

</center>

</Body>

</HTML>

----------- PrintorSave.html --------------

<HTML>

<Head>

<Title>Saved Content</Title>

<Script Language=JavaScript>

function printContent(){
 
   prnBtn.style.display = 'none';
   htmlBtn.style.display = 'none';
   window.print();
   htmlBtn.style.display = ''
   prnBtn.style.display = ''
 
  }

</Script>

<Script language='VBScript'>

Sub saveThis_OnClick
  isData = xferContent.innerHTML
  Set fso = CreateObject("Scripting.FileSystemObject")
  Set contentFile = fso.CreateTextFile("c:My DocumentsThis_Content.txt",True)
  contentFile.WriteLine(isData)
  contentFile.Close
  MsgBox "Successfully saved as This_Content.txt, in My Documents"
   End Sub

</Script>

</Head>

<Body>

<Div id=xferContent></Div>

<input type=button id=prnBtn value='Print This' onClick="printContent()">

<br>

<input type=button id=htmlBtn Name='saveThis' value='Save as a text file'>

</Body>

</HTML>

I hope this helps.

@JacksonCochraneJul 18.2004 — #I had to hurry, because it cut me off earlier. I posted the same

code, but had some things to say.

You can try changing the .txt extention to .html I did and it worked, but if you are trying to also save images, then it may not

work for them. It may be that if the user attempts to open the saved

HTML document containing images, that the system attempts to connect

to the interent.

Try it. Who knows.

@JacksonCochraneJul 19.2004 — #Vic,

By the way, thank you for pointing out that deficiency to me, in such

a respectful, and gracious manner. You must have a million friends.

@vwphillipsJul 19.2004 — #Hi Jackson

Tried your script.

Saved ok as a text file.

However I had a malicious script warning when saving it.

I think this may worry the average surfer(including me)

Interesting though.

ps I am not normally known for my diplomacy.

currently having a debate with moderator LAVALAMP which seems to be going downhill :rolleyes:

@JacksonCochraneJul 19.2004 — #Vic:

Yes, well, don't feel bad. I was terminated from experts-exchange,

after 16,500 points, in just one month, because I complained about

the double standard, with all their 8 or so "leaders." One of them

simply goes around to every question, posting things like, "oh,

that code by so and so, doesn't make me happy." or, it doens't PLEASE

him. Anyway, I don't care. If you have to fight people, to try

and help other people, it seemed crazy.

Yes, I got that warning too, I thought it was because of my ActiveX

security setting. Oh, well, it's the best I can do. It just won't

save as HTML, no matter what I tried, and I tried and tried and

tried, so many ways, I can't count.

I think it might be best to do the Print or Save, from the main

document. I mean, all the things like buttons or images that you don't want saved could be hidden, and then an alert instructing the

person to click File | SaveAs could pop up. Or, hidden like that, it

could automatically print. But the person who posted the question hasn't responded, so no need to start on something like that.

Well, good luck in your battle. What can you do? It's the way the

world works. Sometimes, being right, means nothing.

Jackson

@JacksonCochraneJul 20.2004 — #Okay, this is my last try on this. The code below creates three Divs each with some text and an image. It allows the user to print the page cleanly, without printing the images or images of buttons. It also allows the user to save the page as an HTML document. But there is an acknowledged limitation to the execCommand SaveAs part. The MSDN site states that using this command will not save images that are part of the document. To do that, the user must click File | Save As. So, I added a confimation dialog, to inform the user of this limitation, and ask if they want to proceed.

Here it is:

<HTML>

<Head>

<Script language=JavaScript>

window.onbeforeprint = cleanPage;
  window.onafterprint = restorePage;
 
  function cleanPage(){
 
   prnBtn.style.display = "none"
   htmlBtn.style.display = "none"
   IMG1.style.display = "none"
   IMG2.style.display = "none"
   IMG3.style.display = "none"
  }
 
  function restorePage(){
 
   IMG1.style.display = "";
   IMG2.style.display = "";
   IMG3.style.display = "";
   prnBtn.style.display = "";
   htmlBtn.style.display = ""; 
  }
 
  function printContent(){
 
   window.print();
  }
 
  function openDialog(){
 
   if (confirm('This will allow you to save this page, but NOT any of the images. To save the complete page you must click File | Save As. Continue to save without images?'))
   {
   prnBtn.disabled = true;
   htmlBtn.disabled = true;
   document.execCommand("SaveAs",true,"C:\My Documents\Saved Content.html");
   htmlBtn.disabled = false; 
   }
  }

</Script>

</Head>

<Body>

<Div align=center id=Sect1>

<Img Src='1.jpg' id=IMG1>

<p> This is some text</p>

</Div>

<Div align=center id=Sect2>

<Img Src='1.jpg' id=IMG2>

<p> This is some text</p>

<Div align=center id=Sect3>

<Img Src='3.jpg' id=IMG3>

<p> This is some text</p>

</Div>

</Div>

<br><br>

<center>

<input type=button id=prnBtn value='Print This' onClick="printContent()">

<br>

<input type=button id=htmlBtn value='Save as an HTML document' onClick="openDialog()">

</center>

</Body>

</HTML>

Also in #JavaScript _↴

A simple javascript question onFocus event for a textfield - can you move the cursor?onclick event in javascript

Success!

Help @karayan spread the word by sharing this article on Twitter...

Tweet This

saving and printing a window created by Javascript

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

saving and printing a window created by Javascript

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴