Print web form should change the format and show Print preview

Question

1.00/5 (1 vote)

See more:

Hello Experts,

I have a web application which is more or less like Data entry website.
So here we collect the user's basic information and I would like to have a print option in the form.
But the form should not be like the web page instead it should be different form
Now my question is

The web page design should be different when user clicks on Print.
Print preview and print code I have tried is as below.

XML

function PrintPanel() {
       var panel = document.getElementById("<%=pnlContents.ClientID %>");
       panel.style.visibility = "visible";
       var printWindow = window.open('', '', 'height=400,width=800');
       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;
   }

But I do not quite sure how to do the print preview form look different with web page.
As said I want the webform to look different in print option.
I wish I can show images of how it should look like. because my web page is having huge number of controls to share the code.

Pls help me with this.

Posted 17-Jul-15 9:04am

sudevsu

Updated 20-Jul-15 3:18am

v3

Add a Solution

Comments

[no name] 17-Jul-15 15:15pm

Help you with what? What is a web page that looks different? Different than what?

sudevsu 20-Jul-15 9:20am

Suppose my page.aspx has print button. On clicking button, it should get the data into respective controls and fields and display the format as different to page.aspx design

[no name] 17-Jul-15 17:03pm

When you say different so basically you need to format your contents as per your expected layout and then print that document.

Update your question and add code what you have tried so far?

sudevsu 20-Jul-15 9:25am

Different meaning It should actually change the orientation

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)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-07-17T20:07:00

Solution 1

CSS provides perfect mechanism exactly for what you want: @media rules. You can have some CSS styles common for different media, say, for screen and print, some other styles different (please see the section 7.2.1 for the example of such mix, in the article referenced below): http://www.w3.org/TR/CSS21/media.html[^].

Note that you can make the representation of your form in different media totally different, because you can, among many other things, hide some elements and show others, using the visibility property: http://www.w3.org/wiki/CSS/Properties/visibility[^].

It would make a lot of sense. The functionality of the print is very different. For example, you don't need those check boxes and buttons in the print version, because clicking on them on paper would look pretty stupid. :-)

—SA

Posted 17-Jul-15 20:07pm

Sergey Alexandrovich Kryukov

Updated 20-Jul-15 3:28am

v3

Comments

sudevsu 20-Jul-15 9:13am

What the hell is wrong with you Shekhosvtsov? When someone is trying to help, how come you comment like that? If cannot help keep quiet . This blog is not to abuse. Its for helping. I haven't read the article tha Sergey provided in the solution, however your comment is not appreciable.

sudevsu 20-Jul-15 9:23am

Thanks SA for the solution.
But I wasn't sure about the solution. Because I want entire preview page to look different to my page.aspx

Ignore negative comments.

Sergey Alexandrovich Kryukov 20-Jul-15 9:34am

You are very welcome. Yes, you can make entire page to look different as well. For example, put the whole page in on-screen edition on one div, print edition in a separate div. Give those div's different CSS classes: one showing only on screen and hidden on print, and visa versa for another one. That will solve this problem. Or use any combinations of screen-only and print-only elements. This is exactly what @media was designed for. And, as I think, there are no other way to discriminate the media.

So, will you rethink and still accept the answer formally?

As to the ignoring of the comment, why? That was a massive hatred attack of some 75+ "comments", editions of the answers to make them look negative, and as many down-voted. The offender was reported at the forum and banned. It's not about "offense", it's about spoiling the site. We should not tolerate it.

—SA

sudevsu 20-Jul-15 16:14pm

I just did what you said and it worked perfectly for my requirement. Thanks

Sergey Alexandrovich Kryukov 20-Jul-15 16:15pm

Great. You are very welcome.
Good luck, call again.
—SA