Print preview Window with dynamic HTML

Question

0.00/5 (No votes)

See more:

Hello Friends,

I have a requirement to create an exact stuff like 'Print Preview' window with dynamic html. So I considered an option as below:

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <title></title>
    <script type="text/javascript">
        function PrintPanel() {
            var panel = document.getElementById("<%=pnlContents.ClientID %>");
            var printWindow = window.open('', '_blank', 'Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
           // printWindow.document.write('<html><head><title>DIV Contents</title>');
            //printWindow.document.write('</head><body >');
            printWindow.document.write(panel.innerHTML);
           // printWindow.document.write('</body></html>');
            printWindow.document.close();
            setTimeout(function () {
                printWindow.print();
            }, 500);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Panel ID="pnlContents" runat="server">
            <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
            <br />
                This is <span style="color: #18B5F0">Hello!!! SAM</span>.<br />
                Hoping that you are enjoying my articles!</span>
        </asp:Panel>
        <br />
        <asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick="return PrintPanel();" />
    </form>
</body>
</html>

But I am facing problems with this approach. It certainly opening a window with window.open but original print preview opens in the same page only as modal pop up page rather than new window. the window.open opens a new window which appears behind the print preview. I dont want that new window. Friends can you please help?

Posted 14-Mar-15 8:15am

sam_roy

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2015-03-14T08:36:00

Solution 1

That window opens because you're calling, window.open()[^] and then you're just storing the reference to that window in printWindow variable. Remove that line of code and your pop up window won't come. The remaining objects would remain as they are.

The print window then opens because you call this function too, printWindow.print(); which can be replaced by this function, window.print();[^] which does the same thing; shows the print dialog (a preview). Actually, that is not a preview, it is just the settings for your document before sending it to the printer.

Posted 14-Mar-15 8:36am

Afzaal Ahmad Zeeshan

Updated 14-Mar-15 8:39am

v2

Comments

sam_roy 15-Mar-15 5:05am

thank you in that case how would i provide the dynamic html. The html page wont be there statically it has to be generated on the go and that html has to be shown in print preview?

Afzaal Ahmad Zeeshan 15-Mar-15 9:50am

Is that dynamic page is the content of currently loaded web document?

sam_roy 16-Mar-15 1:45am

no the html has to be created on the go dynamically and that page will be shown in print preview. but window.open making it two step process one it opens the design in another window in window.open with print button and on clicking it shows the print preview. I want to remove the intermediate window that opens with window.open. rather i wanna show the dynamic html as print preview directly.

Afzaal Ahmad Zeeshan 16-Mar-15 6:43am

You can embed the dynamically created document in an iframe and assign an ID to it. Then you can print() that particular document, to preview it. Usually, you would require to create a separate document and assign the similar CSS to it as it would be used for the printed version. Instead of that, just use @media print { } and preview the print version inside the browser's print dialog.