Click here to Skip to main content
15,905,316 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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

1 solution

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.
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900