如何在网页上添加打印按钮答案

【问题标题】：How to add a print button to a web page如何在网页上添加打印按钮
【发布时间】：2012-07-22 23:09:48
【问题描述】：

在我网站的一个页面上（用 php 编码），我正在尝试添加 2 个（甚至更多）打印按钮，每个按钮打印网页的一部分。例如，在一个页面上有一个包含一些值的表格和下面的 2 个图表。我想添加 2 个打印按钮，一个按钮打印表格，另一个按钮打印两个图表。我找到了这个Example，但无法清楚地理解。任何帮助或示例都会对我有所帮助。

提前致谢。

【问题讨论】：

在调用 window.print 之前尝试设置不同的@media 打印样式，具体取决于单击的按钮。
@Piskvor，更简单：只需创建一些以前的规则并切换类名:)
@F.卡尔德兰：或者那个。同样的事情，主要是:)

标签： php css

【解决方案1】：

这是一个 html/javascript 代码，点击后会启动浏览器的打印对话框。

<button onClick="window.print()">Print this page</button>

【讨论】：

仅此代码只是打印整个页面......它不能用于选择应该打印页面的哪个部分。
@Ed Manet 是的，我知道 window.print() 函数..但它没有选择网页的一部分
我认为没有任何浏览器能够仅打印页面的一部分。它将打印您在页面上显示的任何内容。因此，要么打开一个包含您要打印的内容的新窗口，要么隐藏您不想打印的所有内容。

【解决方案2】：

如果您的表格位于 id='printTable' 的 div 内，请使用：

<a href="#null" onclick="printContent('printTable')">Click to print table</a>

编辑：这里是函数“printContent()”

<script type="text/javascript">
<!--
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//-->
</script>

【讨论】：

很棒的解决方案！我唯一需要添加的是包含 CSS 表以保持格式。 (newwin.document.write('<HTML><HEAD> <link rel=\"stylesheet\" type=\"text/css\" href=\"CSS/style.css\"/>'))

【解决方案3】：

一个简单的想法是创建一些以前的 css 打印规则 ad hoc，例如

.printtable * { display : none; }
.printtable table { display : block; }

和

.printtableandgraph * { display : none; }
.printtableandgraph img { display : block; }

那么这两个按钮应该在 window.print() 语句之前为 body 元素（或其他包含表格和图表的元素）添加一个 .printtable 和一个 .printtableandgraph 类

（如果用户在同一个打印按钮上单击两次或更多次，请检查元素是否已经设置了该类名）

【讨论】：

【解决方案4】：

打印按钮

<button onClick="window.print()">Print this page</button>`

使用此代码打印任何网页，只有一个回退它的打印所有按钮和菜单栏。

【讨论】：

这个答案与Ed Manet's one 有什么不同？

【解决方案5】：

要打印页面的一部分，您可以使用 print.css 和打印按钮，这是一种快速而简单的方法。

设置 print.css 文件并包含：

     body {visibility:hidden;}
     .print {visibility:visible;}

将.print 类添加到页面的适当部分。
添加按钮：

&lt;button onClick="window.print()"&gt;Print this page »&lt;/button&gt;

打印结果整洁干净。

【讨论】：