Print Preview to a web page

Question

1.00/5 (2 votes)

See more:

Hello experts,

I have a web form something like data entry website. A
After entering the data in the fields, if user clicks on Submit button, I want some function that should do below things

1) screen shot/ image / copy the web page as it is
2) display it second / new tab /new window
3) Work like print preview

I have working on quite sometime to get the PDF form fillable and printed.
Now that ASPX page should be print previewed , it seems difficult and confusing for me.

Could you please help me with this?

Posted 27-Jul-15 10:38am

sudevsu

Add a Solution

Comments

Afzaal Ahmad Zeeshan 27-Jul-15 16:46pm

Why won't you simply let browser handle the window.print(); function?

sudevsu 27-Jul-15 17:00pm

Nope. I knew that someone is gonna tell this. My Manager wants it like that. It should open same exact page like print preview. Can you help me please?

Afzaal Ahmad Zeeshan 27-Jul-15 17:01pm

Then try to create a PDF of that on the server-side. Try using iTextSharp library for that. Stream that PDF down, and show it in a floating (position: absolute) container.

sudevsu 28-Jul-15 8:10am

As said earlier, I already created the PDF on server side. But it opens on same page. Now I want a button to work exactly like a print preview on browser. Could you please tell me how

Sergey Alexandrovich Kryukov 27-Jul-15 17:07pm

Each browser has "Print preview". Why not using it? You can use CSS @media rules to create print version of anything, which could be even totally different from the on-screen page.
By the way, this is a second case when you refer to your "manager". May I ask you: does this guy have any clue on what computers do? :-)
—SA

sudevsu 28-Jul-15 8:01am

lol... No he is really good guy. But he has come down to make the non-computer literates (Dealers) happy. :)
He will only be happy if all the possible options are closed.
Now... Exactly print preview of browser should be how the button is supposed to work. Can you tell me how?

Sergey Alexandrovich Kryukov 28-Jul-15 8:39am

I mean: why a button? There is Print/Preview items on the browser. I'm not sure that adding something extra on a page should necessarily be better for an illiterate user...
—SA

sudevsu 28-Jul-15 9:16am

Not an extra button, Submit will insert the data to Database and then followed by JavaScript which is below. Multiple things on same button

Sergey Alexandrovich Kryukov 28-Jul-15 9:30am

After all, this is one of main purpose of ASP.NET: to generate HTML view out of data, so why not a "print version"? But generally it's not good to create redundant a view (which itself will still have "print preview").
—SA

sudevsu 28-Jul-15 10:09am

Meaning. Can you please give any example for it

Sergey Alexandrovich Kryukov 28-Jul-15 10:46am

Of what? Of generating any HTML ASP.NET? It's anything. :-)
—SA

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)

sudevsu · Accepted Answer · 2015-07-28T03:15:00

I kind of got some solution...
But I am really not satisfied with it. Because the Style of the Preview is not proper.
How can I do a shrink fit to width in style and adapt that style in JavaScript function is my question now...

Can someone help me with that?

XML

function PrintPanel() {
        debugger;
        var panel = document.getElementById("<%=Upnl1.ClientID %>");
//        panel.style.visibility = "visible";
        panel.style = 'preview-message';
        var printWindow = window.open(panel, '', 'height=600,width=900');
        printWindow.document.styleSheets = 'preview-message';
        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();
        }, 1000);
        return false;
    }