javascript 在asp.net中生成网页的打印预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10203199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate print preview of a web page in asp.net
提问by sarika
<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.
这是我用来实现打印功能的唯一代码。它生成一个打印对话框。为了使页面打印友好，我使用了样式表并将我不想要的 div 隐藏在打印页面中。
I now need to generate a print preview of that page. Any suggestions?
我现在需要生成该页面的打印预览。有什么建议？
Thanks
谢谢
回答by Zaheer Ahmed
Basically there is no functionality available until now but you can achieve by creating a copy of same html file with name print.htmwith the Print css and open this file on button Print Preview click as a popup page and render it, This will preview the page :
基本上到目前为止还没有可用的功能，但您可以通过print.htm使用 Print css创建名称相同的 html 文件的副本来实现，并在按钮 Print Preview 上打开此文件，单击作为弹出页面并呈现它，这将预览页面：
<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>
回答by Jonathan Wood
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.
幸运的是，我使用的浏览器（IE 和 Chrome）提供了打印预览，因此无论如何您都可以免费获得。但是，如果您尝试手动实现打印预览，我只是不认为这是一个实际目标。
回答by ZeNo
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:
一种方法是在您的 css 中使用 mediaType 打印。仅当您在打印模式下打开页面时才会应用此 css。在您的 css 文件中添加以下类：
@media print {
// printer friendly page css
}
Another way is by using pure javascript. there are bunch of articleson internet for this:
另一种方法是使用纯 javascript。互联网上有很多关于这个的文章：
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.
如果您有打印机友好页面的通用模板。我建议您为打印版本创建一个单独的页面，当用户单击链接时，将其导航到您的新打印机友好页面。我会推荐这种方法，因为这是万无一失的，您可以完全控制它，其余方法都有一些陷阱。
