打印 html 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10173727/
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
Printing a html table
提问by dames
I have the following table for example, how do i add print functionality just to the table? And a button that when clicked, the following table is printed via printer
例如，我有下表，如何将打印功能添加到表格中？还有一个按钮，点击后通过打印机打印下表
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
回答by Zaheer Ahmed
You require to create new style sheet print.css and set CSS media=print
您需要创建新的样式表 print.css 并设置 CSS media=print
for example :
例如 ：
<style media="screen">
.noPrint{ display: block; }
.yesPrint{ display: block !important; }
</style>
<style media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
and add class to "yesPrint" to the sections you want to print
并将类添加到“yesPrint”到要打印的部分
<div class= "yesPrint">
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
Now add a button
现在添加一个按钮
<input TYPE="button" onClick="window.print()">
for more detatil : http://www.codeproject.com/KB/HTML/Printing_with_CSS.aspx
更多细节：http: //www.codeproject.com/KB/HTML/Printing_with_CSS.aspx
回答by lvil
I use this function:
我使用这个功能：
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title></title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body style="direction:rtl;"><pre>');
mywindow.document.write(data);
mywindow.document.write('</pre></body></html>');
mywindow.document.close();
mywindow.print();
return true;
}
</script>
You can modify it to your needs.
In fact it opens a new window containing this element and prints it.
您可以根据需要对其进行修改。
事实上，它会打开一个包含此元素的新窗口并打印它。
回答by Betty Mock
One approach is to open the table in a new page. You can do this with a javascript submit of a form to the new page, passing along all the variables you will need to build your table.
一种方法是在新页面中打开表格。您可以使用 javascript 将表单提交到新页面来完成此操作，传递构建表格所需的所有变量。
<form name = "theform" .... >
<input type = "hidden" name = "something" value = "importantdata">
... stuff
</form>
<script type = "text/javascript">
submit('theform')
</script>
Then put the code to generate the table on the new page along with your button. If you don't want a button, you can still invoke the print function by simply referring to your javascript function within your html code:
然后将生成表格的代码与您的按钮一起放在新页面上。如果您不需要按钮，您仍然可以通过在 html 代码中简单地引用您的 javascript 函数来调用打印函数：
<script type = "text/javascript">
printit()
</script>
You can also open your table in a new page using the javascript window.open() method. This is a good approach if you don't have too many variables to pass to the new window. You can pass a few small things via url variables, which you can set up in your javascript function.
您还可以使用 javascript window.open() 方法在新页面中打开您的表格。如果您没有太多变量要传递到新窗口，这是一个很好的方法。您可以通过 url 变量传递一些小东西，您可以在 javascript 函数中设置这些变量。
I have also used an approach where I stay on the same page and the user can click on something to remove the display of everything but the table. This is done by wrapping the removable stuff in a div
我还使用了一种方法，我停留在同一页面上，用户可以单击某些内容以删除除表格之外的所有内容的显示。这是通过将可移动的东西包装在一个 div 中来完成的
<div id= "remove">
stuff
</div>
When the user does a click, the javascript function that is fired sets the display for that id to "none".
当用户单击时，触发的 javascript 函数将该 ID 的显示设置为“无”。
document.getElementById('remove').style.display = 'none';
A second click restores the display. The click doesn't have to be on a button. I have used it on a report heading, so that everything would disappear except the report itself. You could put it on one of your table cells.
再次单击可恢复显示。单击不必在按钮上。我在报告标题上使用了它，因此除了报告本身之外，所有内容都会消失。你可以把它放在你的表格单元格之一上。
In any case, the window.print() method will only open a window for the printer; the user can then set up the print job as he/she wishes, make sure the printer is on, etc.
无论如何，window.print() 方法只会为打印机打开一个窗口；然后，用户可以按照他/她的意愿设置打印作业，确保打印机已开启等。
回答by Royi Namir
jsway : ( you cant print only the table)
js方式：（你不能只打印表格）
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
c#way :
c#道路 ：
you should open a new page or container, with styles or crystal reports - and print using c# commands.
您应该打开一个带有样式或水晶报告的新页面或容器 - 并使用 c# 命令进行打印。
回答by Jens Egholm
Actually you can print only the table. It requires some JavaScript magic (inspired by this page). The idea is that we open a new page (JS-window element), insert the table into that page and prints it. There are probably some portability issues with different browsers. Also, some browsers will probably complain about popups but yeah.. in theory it should work. :-)
实际上，您只能打印表格。它需要一些 JavaScript 魔法（受此页面启发）。这个想法是我们打开一个新页面（JS-window 元素），将表格插入该页面并打印它。不同的浏览器可能存在一些可移植性问题。此外，一些浏览器可能会抱怨弹出窗口，但是是的......理论上它应该可以工作。:-)
The code could look something like this;
代码看起来像这样；
<script type="text/javascript">
var win = window.open(); // We create the window
win.document.open(); // We open the window (popup-warning!)
win.document.write("<h1>Hello world</h1>"); // Insert table here <--
win.print(); // Print the content
win.close(); // Close down the page
</script>
