如何在网页上插入一个打印表单的打印按钮

Question

假设我有一个如下所示的页面上的简单表单：

<form style="text-align:center;">
    <p> STUFF </p>
</form>

我想添加一个按钮，当用户点击它时，浏览器的打印对话框出现，我该怎么做？

编辑：我想要打印表单，而不是整个页面。

- user2962142

---

你想打印表格还是整个页面？ - Andy T

抱歉，我忘了提到，我想要打印表单。 - user2962142

这与asp.net mvc无关。 - ataravati

Answer 1

打印整个页面

尝试添加一个调用window.print()的按钮

<input type="button" value="Print this page" onClick="window.print()">

在页面上打印特定部分/容器

<div id="print-content">
 <form>

  <input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</form>
</div>

然后在HTML文件中添加这段脚本代码

<script type="text/javascript">
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        w=window.open();
        w.document.write(printContents);
        w.print();
        w.close();
    }
</script>

参考如何仅打印<div id="printarea"></div>？

- Murali Murugesan

---

我应该把这个函数放在哪里？ - user2962142

谢谢，但每次我点击按钮时它都没有反应，有什么想法吗？ - user2962142

谢谢，最新更新之前它是有效的，只有几个问题，我能隐藏页眉和页脚（页码和日期）吗？文本对齐自己保持左对齐，有什么想法吗？ - user2962142

在DOM中查找它们的ID并隐藏，例如document.getElementById('footer').style.display=none，然后调用打印。 - Murali Murugesan

好的，我做不到，但还是谢谢你，至少它正在打印。 - user2962142

Answer 2

要使用提交按钮打印，请将以下内容添加到您的提交脚本中：

<input type="button" value="打印此页面" onClick="window.print()">

请注意，这只会触发客户端上可用的浏览器实现的打印功能。

- Vin

---

请查看此链接，其中有提高您内容质量的两个方法。 - Willie Cheng

TS想要打印表单，而不是页面。 - Els den Iep

Answer 3

你需要的是 window.print()：

<form style="text-align:center;">

  <p> STUFF </p>

  <a href="#" id="lnkPrint">Print</a>
</form>

JavaScript:

$( document ).ready(function() {
    $('#lnkPrint').click(function()
     {
         window.print();
     });
});

- Andy T

---

我创建了一个 JavaScript，并将代码放置并添加了 <a..></a>，但当我单击它时没有任何反应。 - user2962142

这是使用jQuery。你是否已经包含了jQuery？ - Andy T

我已经创建了一个jsFiddle来展示它的工作原理。请注意它包含jQuery 1.8.3：http://jsfiddle.net/LP8VJ/ - Andy T

不好意思，我还很新，我该怎么做？ - user2962142

此页面上没有任何 jQuery 标签。因此，我认为使用 jQuery 的解决方案是无效的。更不用说这可以轻松地在不包括第三方软件包的情况下完成了。 - Liam

Answer 4

除了上述方法，这里还有一些其他的方法可以采用：

<a href="Javascript:window.print();">Print</a>

并且不要在你的HTML中包含任何JS：

const el = document.getElementById("aTag");
el.addEventListener("click", () => { window.print();});

<a id="aTag">print</a>

- Liam