打印Web表单应更改格式并显示打印预览 [英] Print web form should change the format and show Print preview
问题描述
Hello Experts，
我有一个或多或少像数据输入网站的网络应用程序。
所以这里我们收集用户的基本信息，我希望在表单中有一个打印选项。
但是表格不应该像网页那样应该是不同的形式
现在我的问题是
当用户点击打印时，网页设计应该不同。
我试过的打印预览和打印代码如下。
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.
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;
}
但是我不太确定如何使打印预览表单看起来与网页不同。
如上所述，我希望webform在打印选项中看起来不同。
我希望我可以展示它应该是什么样的图像。因为我的网页上有大量的控件来共享代码。
请帮我这个。
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.
推荐答案
CSS提供了完全符合您需要的机制：@media规则。您可以为不同的媒体设置一些常见的CSS样式，例如，屏幕和打印，其他一些不同的样式（请参阅下面引用的文章中有关此类混合示例的第7.2.1节）： http://www.w3.org/TR/CSS21/media.html [ ^ ]。
请注意你可以在不同的媒体中表达你的表单完全不同，因为你可以使用visibility属性隐藏一些元素并显示其他元素： http://www.w3.org/wiki/CSS/Properties/visibility [ ^ ]。
这会很有意义。印刷品的功能非常不同。例如，您不需要打印版本中的那些复选框和按钮，因为在纸上单击它们看起来非常愚蠢。 :-)
-SA
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 thevisibilityproperty: 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
这篇关于打印Web表单应更改格式并显示打印预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
