javascript 如何为我的 html 表单制作打印预览和打印按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29025316/
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
How to make a print preview and print buttons for my html form
提问by Atchyut Nagabhairava
Hi currently i'm working on a html form with some fields, what all I need is to get a print preview of that form with the filled answers and later it should be printed on clicking on a print button. Can any one please help me out with this, I would be very thankful to you if you can.
嗨，目前我正在处理一个带有某些字段的 html 表单，我所需要的只是获得该表单的打印预览，其中包含已填写的答案，稍后应该在单击打印按钮时打印出来。任何人都可以帮我解决这个问题，如果可以，我将非常感谢你。
回答by Utsab Neupane
Here is the example you can refer this. Html code :
这是您可以参考的示例。html代码：
<html>
<body id="printarea">
<table class="tble">
<tr>
<td>
Student Name
</td>
<td>
John Sypon
</td>
</tr>
<tr>
<td>
Student Rollnumber
</td>
<td>
R001
</td>
</tr>
<tr>
<td>
Student Address
</td>
<td>
132 Kane Street Toledo OH 43612.
</td>
</tr>
<tr>
<td>
<input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
</td>
<td>
<input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>
</td>
</tr>
</table>
</body>
</html>
And include this css link:
并包含此 css 链接：
<link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />
now print.css file :
现在 print.css 文件：
@media print /*--This is for Print--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
-webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/
}
}
@media screen /*--This is for Print Preview Screen--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
}
}
and style.css
和 style.css
@media screen /*--This is for Screen--*/
{
.btn
{
background-color: #AFAFAF;
display: block;
}
.tble
{
background-color: #E5E5E5;
border: 1px solid #CD853F;
}
}
Now include this javascript code :
现在包括这个 javascript 代码：
<script type="text/javascript">
/*--This JavaScript method for Print command--*/
function PrintDoc() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
/*--This JavaScript method for Print Preview command--*/
function PrintPreview() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
</script>
I hope this answer help!!!
希望这个回答有帮助！！！
回答by prajeesh
You can use javascript method window.print()
您可以使用 javascript 方法 window.print()
回答by Rohan Kumar
Try,
尝试，
$('button').on('click',function(){
print();
});
For print preview you can try Print and Print Preview separately using HTML, CSS and JavaScript
对于打印预览，您可以使用 HTML、CSS 和 JavaScript 分别尝试打印和打印预览
