2

例如，我有下表，如何将打印功能添加到表中？还有一个按钮，点击后，下表将通过打印机打印

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

5 回答 5

5

您需要创建新样式表 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

于 2012-04-16T12:07:39.023 回答
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>

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

于 2012-04-16T12:08:33.070 回答
1

一种方法是在新页面中打开表。您可以通过将表单的 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 的显示设置为“无”。

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

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

无论如何，window.print() 方法只会为打印机打开一个窗口；然后，用户可以根据自己的意愿设置打印作业，确保打印机已打开等。

于 2013-07-20T04:29:50.163 回答
0

js方式：（你不能只打印表格）

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

c#方式 ：

您应该打开一个带有样式或水晶报表的新页面或容器 - 并使用 c# 命令进行打印。

于 2012-04-16T12:06:07.120 回答
0

实际上你只能打印表格。它需要一些 JavaScript 魔法（受此页面启发）。这个想法是我们打开一个新页面（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>
于 2012-04-16T12:12:50.723 回答