如何在网页中插入打印表单的“打印”按钮

How can I insert a Print button that prints a form in a webpage

本文关键字：打印 表单 按钮 插入 网页      更新时间：2023-09-26

所以，假设我在一个页面中有一个简单的表单，如下所示：

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

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

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

打印整个页面

尝试添加一个调用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＝"；打印区域">lt/div>只有

要使用提交按钮打印，请将其添加到您的峰会脚本中：

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

请记住，这只会触发客户端提供的任何浏览器实现的打印功能。

您需要的是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();
     });
});

除上述方法外，您还可以在这里采取其他几种方法：

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

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

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

相关文章：