Generate print preview of a web page in asp.net

2020-02-15 15:00发布

站内问答 / JavaScript
1145 3 4 

<a href="_javascript:window.print()">
<img class="noPrint" src="Images/Print_icon.png" border="0"></a>

This is the only code i am using to implement print function. It generates a print dialog box. And to make the page print friendly, I have used stylesheets and hid the div's that I dont want in the print page.

I now need to generate a print preview of that page. Any suggestions?

Thanks

3条回答
该账号已被封号
2楼-- · 2020-02-15 15:40

Basically there is no functionality available until now but you can achieve by creating a copy of same html file with name print.htm with the Print css and open this file on button Print Preview click as a popup page and render it, This will preview the page :

<html> 
<head> 
<title></title> 
//do it in simple way.. 
<script LANGUAGE=”JavaScript”> 
function displayMessage(printContent) { 
var inf = printContent; 
win = window.open(”print.htm”, ‘popup’, ‘toolbar = no, status = no’); 
win.document.write(inf); 
win.document.close(); // new line 
} 
</script> 
</head> 
<body> 
<div id=”printarea”>Print this stuff.</div> 
<a href=”javascript:void(0);” onclick=”displayMessage(printarea.innerHTML)”>Print Preview</a>

</body> 
</html>
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
3楼-- · 2020-02-15 15:47

I really don't see this as practical. Your web page has no knowledge of font size (zoom level), page margins, orientation or anything else you'd need to know to construct a print preview image.

In addition, it's possible for a page to reference images and other content from other sites. How will your code know what is needed here?

Fortunately, the browsers I use (IE and Chrome) provide print preview, so you'd get it for free anyway. But if you're trying to implement print preview manually, I just don't see that as a practical goal.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
4楼-- · 2020-02-15 15:51

One way is to use the mediaType print in your css. This css will only be applied when you open you page in print mode. Add following class in your css file:

@media print {
// printer friendly page css
}

Another way is by using pure javascript. there are bunch of articles on internet for this:

If you are having a common template for printer friendly pages. I would suggest you to create a seperate page altogether for print version and when user clicks on link navigate it to your new printer friendly page. I would recommed this approach as this is foolproof and you have complete control over it, rest of approaches have some pitfalls.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)