如何在網頁中插入打印表單的打印按鈕

Question

所以，假設我在這樣的頁面中有一個簡單的表單：

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

我想添加一個按鈕，這樣當用戶點擊它時，瀏覽器的打印對話框就會出現，我該怎么做？

編輯：我想打印表格，而不是頁面。

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>

僅參考Print <div id="printarea"></div> 嗎？

Answer 2

要使用提交按鈕打印，請將其添加到您的峰會腳本中：

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

請記住，這只會觸發客戶端可用的任何瀏覽器實現的 打印功能。

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();
     });
});

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>