Question

我有以下表格，例如，如何在表格中添加打印功能？点击一个按钮，通过打印机打印下表

<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>

Answer 1

您需要创建新样式表print.css并设置CSS media = print

例如：

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style>

<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

并将“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>

现在添加一个按钮

<input TYPE="button" onClick="window.print()">

了解更多详情：http://www.codeproject.com/KB/HTML/Printing_with_CSS.aspx

Answer 2

我使用这个功能：

<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>

您可以根据需要进行修改实际上它会打开一个包含该元素的新窗口并打印出来。

Answer 3

一种方法是在新页面中打开表格。您可以使用表单的javascript提交到新页面，传递构建表所需的所有变量。

<form name = "theform" .... >
<input type = "hidden" name = "something" value = "importantdata">
  ... stuff
</form>

<script type = "text/javascript">
submit('theform')
</script>

然后将代码与新按钮一起生成新页面上的表格。如果你不想要一个按钮，你仍然可以通过简单地引用你的html代码中的javascript函数来调用打印功能：

<script type = "text/javascript">
printit()
</script>

您还可以使用javascript window.open（）方法在新页面中打开表格。如果您没有太多变量传递到新窗口，这是一个很好的方法。你可以通过url变量传递一些小东西，你可以在你的javascript函数中设置它。

我还使用了一种方法，我停留在同一页面上，用户可以点击某些内容来移除除桌子外的所有内容的显示。这是通过将可移动的东西包装在div

中完成的

<div id= "remove">
   stuff
</div>

当用户单击时，触发的javascript函数会将该id的显示设置为“none”。

document.getElementById('remove').style.display = 'none';

第二次单击可恢复显示。点击不必在按钮上。我已经在报告标题上使用它，所以除了报告本身之外，一切都会消失。你可以把它放在你的一个表格单元格上。

在任何情况下，window.print（）方法只会打开打印机的窗口;然后，用户可以按照自己的意愿设置打印作业，确保打印机已打开等。

Answer 4

js方式:(您只能打印表格）

<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>

c#方式：

你应该打开一个带有样式或水晶报告的新页面或容器 - 并使用c＃命令打印。

Answer 5

实际上你只能打印表格。它需要一些JavaScript魔法（受this page启发）。我们的想法是打开一个新页面（JS-window元素），将表格插入该页面并打印出来。不同浏览器可能存在一些可移植性问题。此外，一些浏览器可能会抱怨弹出窗口，但是...理论上它应该工作。： - ）

代码可能看起来像这样;

<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>

打印html表

5 个答案: