I want to create print friendly version of my ASP.NET MVC 3 view how can I do this ? Also, what if I need to make print friendly version of few parts of the view ?
Regards.
Add a comment
|
2 Answers
I use the same views, but have 2 CSS files (one with media="screen" and the other with media"print").
In the print CSS file I use CSS to hide all the irrelevant DOM elements using display:none;.
Example MVC View:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="pageHeader">This will not be shown in print - menubar, etc.</div>
<h1>Title</h1>
<p>Text</p>
</body>
</html>
Example print.css file:
#pageHeader {
display: none;
}
Have a look at this good 'A List Apart' article on CSS for printing: http://www.alistapart.com/articles/goingtoprint/
8 Comments
DotnetSparrow
@mkeats : How The browser will pick the print friendly stylesheet on link click
Mark Keats
The browser will render using the screen.css file for normal browsing. When someone prints or does print preview the borwser will then automatically render with the print.css file. You don't need to do anything to switch between the different files.
DotnetSparrow
@mkeats: Can I keep the css file names as I have and just add/change media type ?
Mark Keats
Yes, the filenames/paths can be anything as long as the media attribute is correctly set.
Mark Keats
The page will only be shown using the print-friendly stylesheet when a user prints the page or does a print preview. You won't actually make any switch to the print-friendly view yourself. You can use
<a href="javascript:window.print()">Click to Print This Page</a> to cause the browser to open the print dialogue. |
I would do this just via CSS and not anything to do with MVC.
Just define a separate style sheet just for print. For example
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
The advantage of doing it this ways is:
- That's what CSS was meant for rendering the same content differently for different devices
- Less work, you do not have to maintain 2 MVC views
- Easier for the user, not matter what page they are on, they just press the print button on their browser and it will work, they do not have to click a separate printer friendly version link.
- Changes you make to the CSS will be site wide, for example in your CSS for print if you do not want to print the logo or menu you define it one in your CSS and all pages will apply that style.
2 Comments
DotnetSparrow
How can I define print friendly css ?
Daveo
See mkeats answer for the how to
