如何为html表单制作打印预览和打印按钮
如何为html表单制作打印预览和打印按钮
提问于 2015-03-13 13:15:17
嗨，目前我正在处理一个带有一些字段的html表单，所有我需要的是获得该表单的打印预览与填写的答案，稍后它应该打印在点击打印按钮。有没有人能帮我解决这个问题，如果你能帮我，我将非常感谢。
回答 3
Stack Overflow用户
发布于 2015-03-13 13:29:52
下面是你可以参考的例子。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>并包含此css链接：
<link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />现在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;
}
}和style.css
@media screen /*--This is for Screen--*/
{
.btn
{
background-color: #AFAFAF;
display: block;
}
.tble
{
background-color: #E5E5E5;
border: 1px solid #CD853F;
}
}现在包含以下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>我希望这个答案能有所帮助！
Stack Overflow用户
发布于 2015-03-13 13:20:24
您可以使用javascript方法window.print()
Stack Overflow用户
发布于 2015-03-13 13:20:37
试一下，
$('button').on('click',function(){
print();
});对于打印预览，您可以尝试Print and Print Preview separately using HTML, CSS and JavaScript
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29025316
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号