Print-friendly ASP.NET MVC 3 view_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-22 23:18 出处：网络

I want to create print frien开发者_高级运维dly 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.

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/

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.