Hi All,

I have an asp report page which has options to save the report as html & print the page. Both these are done by javascript by clicking the 2 images for save & print. In the case of Saving the file I have tried using "style = display:none;" with the Save img with javascript ExecCommand('SaveAs'). But this does not help. I can see the outline of the 2 images in the .htm file that I have saved. I have to save the file without the images. How can I achieve this. The following is the code that i have used:

-----------------------------------------------------------------
function openSaveReportDialogue()
{
    document.getElementById("SaveImg").style.display = 'none';
    document.getElementById("PrintImg").style.display = 'none';
    SaveReport();
}
function SaveReport()
{
    document.execCommand('SaveAs',1,'PASSReportMain');
    document.getElementById("SaveImg").style.display = 'block';
    document.getElementById("PrintImg").style.display = 'block';
}
-------------------------------------------------------------

The function openSaveReportDialogue() is called from the Onclick of the save image.


Pls help!!!!

When you try to save a document, browser will send a new request to server and retrieves a new copy of your page (and also all of it's resources) and let user choose an appropriate location to save newly downloaded document. As your 'Save' and 'Print' buttons are visible in newly downloaded page, they will be visible in saved one too.

I think you can place a hidden IFRAME (like <IFRAME id="saveFrame" style="display:none"></IFRAME>) in your page and replace your 'openSaveReportDialogue()' method with something like this :

function openSaveReportDialogue()
{
    document.getElementById("SaveImg").style.display = 'none';
    document.getElementById("PrintImg").style.display = 'none';
    document.getElementById("saveFrame").document.writ e(document.body.innerHTML);
    SaveReport();
}

Using this approach, you will fill 'saveFrame' with your current document's content (not the original one) and as you are hiding buttons just before doing this, they will not appear in frames content.

Also notice that you should change your 'SaveReport' implementation as below :

function SaveReport()
{
    document.getElementById("saveFrame").document.exec Command('SaveAs',1,'PASSReportMain');
    document.getElementById("SaveImg").style.display = 'block';
    document.getElementById("PrintImg").style.display = 'block';
}

In this implementation, you will save contents of 'saveFrame' instead of main document

Thanks for your suggestion !!!

But where do I place the IFRAME block???? and What will it contain???? Will it contain HTML block having the 2 images that I have presently in a <Div> ..????
Your help needed???

Dear arnabghosh

Position of IFRAME element is not important, it's display style is none, so your browser will not render it on screen.

As I said, an IFRAME element has no content at start
(<IFRAME id="saveFrame" style="display:none"></IFRAME>).

It's contents are provided in your 'openSaveReportDialogue' method as
document.getElementById("saveFrame").document.writ e(document.body.innerHTML
);

You should place your buttons in their original place as before (Don't place them in IFRAME element).

Just do this, as i said in previous post, and it works (I tried it).

Ehsan Zaery Moghaddam

Thanks for the solution. It works. Only problem is the display gets distorted and does not inherit any of the styles that were used for the page.

How can I deal with that????
any help??

Hi arnabghosh

Your stylesheets are defined in HEAD element of document and when you copy inner html of document to hidden frame, copy operation will be done just for body contents (not header of document).

I think you can create your frame stylesheets dynamically using 'createStyleSheet' method of 'document' object. You should do this after setting content of frame and just before saving it, and repeat it for every style link element in page header. So again, your 'openSaveReportDialogue' method will be changed to :

function openSaveReportDialogue()
{
    document.getElementById("SaveImg").style.display = 'none';
    document.getElementById("PrintImg").style.display = 'none';
    document.getElementById("saveFrame").document.writ e(document.body.innerHTML);
    for(var i=0; i<document.styleSheets.length; i++)
    {
        document.getElementById("saveFrame").document.crea teStyleSheet(document.styleSheets[i].href);
    }
    SaveReport();
}

Have a nice save!




Ehsan Zaery Moghaddam

Thanks Ehsan Zaery Moghaddam !!!

I tried the above code for style sheets but did not work.

I used
alert(document.styleSheets.length);

to check if the style sheet could be copied but the result was that the alert gave a '0' value in return for the length, which means it could not get the style sheets.

my style sheets are as follows:
<STYLE TYPE="TEXT/CSS">
.TextOnHeader
{
FONT-SIZE:10 pt;
FONT-FACE:Arial;
FONT-WEIGHT:BOLD;
}
.TextOnData
{
FONT-SIZE:8 pt;
FONT-FACE:Arial;
}
TD
{
    FONT-FAMILY:Arial;
    FONT-SIZE:8pt;
}
INPUT
{
    FONT-FAMILY:Arial;
    FONT-SIZE:8pt;
}
SELECT
{
    FONT-FAMILY:Arial;
    FONT-SIZE:8pt;
}
</STYLE>

This is in the head section.
I have used yur javascript code as:
for(var i=0; i<document.styleSheets.length; i++)
    {
        document.getElementById("saveFrame").document.crea teStyleSheet(document.styleSheets[i].TextOnHeader);
    }

may be I have missed something.

Anyway thanks A lot for letting me know a few new things.

Hi arnabghosh

You should use this technique only when you have defined your stylesheets in an external CSS file and link it to your document as below in head section of document :

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

'styleSheets' collection of 'document' object contains an array of 'styleSheet' objects that have been defined in this manner.

Good luck





Ehsan Zaery Moghaddam