5 jQuery打印頁面選項

jQuery 打印插件讓您能夠控制和自定義網站的哪些部分被打印，提供了一種替代瀏覽器默認打印功能（通常打印整個窗口）的方案。本文將探討幾種流行的 jQuery 打印插件，並演示如何自行構建此功能。

關鍵要點:

• jQuery 打印插件允許您控制和自定義網站哪些部分被打印，提供了一種替代瀏覽器默認打印功能（通常打印整個窗口）的方案。
• jQuery Print Preview 插件打開一個新的瀏覽器窗口來顯示網站的特定部分以進行打印。此插件對於打印數據部分（例如信息卡或表格中的一行）非常有用。
• jQuery Print Plugin 提供一系列設置來定制打印需求。例如，可以將其設置為通過 iFrame 在當前窗口中彈出，設置打印顯示呈現之前的等待時間，以及在彈出窗口之前或之後放置內容。
• 如果你想嘗試更高級的方案，可以嘗試動態創建一個<iframe></iframe> 元素，將其添加到頁面中，設置<iframe></iframe> 的內容，在<iframe></iframe> 上調用.print()，然後在短時間延遲後將其移除。

jQuery 打印插件概述:

雖然打印插件可能不是最令人興奮的插件，但以下是一些您可能想要了解的插件。我們還將簡要介紹如果您想嘗試更高級的方案，如何自己構建此功能。

注意: 舊版瀏覽器（我指的是 IE8）在使用某些插件時可能會出現異常行為。但是，所有現代瀏覽器都以一致的方式處理打印預覽，因此如果您需要完全兼容性，請記住這一點。

jQuery Print Preview

這個小型 jQuery 插件允許您打開一個新的瀏覽器窗口來顯示網站的特定部分以進行打印。與該列表中的其他一些插件不同，此插件不會直接觸發瀏覽器的打印功能，它只是打開一個最小窗口（這很完美，因為您現在可以直接打印它）。

該插件的用途是當您有一些想要打印的數據部分時，例如信息卡或表格中的一行。您可以將其在一個新窗口中打開（為插件提供配置選項），然後從那裡打印。這確保您只打印所需的內容。

它的瀏覽器支持似乎相當全面，在我的現代瀏覽器上運行良好。

不幸的是，它不在 GitHub 上，因此很難知道它是否正在積極維護。但是，這不應該阻止您，您可以查看它是否適合您，然後按原樣使用它。

jQuery Print Plugin

不要被難看的演示所迷惑。 jQuery Print Plugin 運行良好，並提供一系列設置供您自定義打印需求。例如，您可以設置彈出窗口是否在當前窗口（通過 iFrame）中進行，設置打印顯示呈現之前的等待時間，以及在彈出窗口之前/之後放置內容。

要開始運行，只需向其傳遞一個 jQuery 對像或選擇器即可，插件會完成其餘工作。

作者在 2016 年發布了一些提交來改進該插件。雖然提交不多，但它似乎仍在不斷發展。

jQuery printPage 插件

讓我們直接談談這個插件。它很久沒有更新了。雖然有些人可能會因為看到它上次更新是在 6 年前而感到不安，但其他人（包括我自己）可以看到它是一個簡單的插件，它可以正常工作。

此插件創建一個帶有消息和圖像的小型模式窗口，在主瀏覽器打印模式加載之前加載。當用於指向要打印內容的錨標記時，它似乎效果最佳。您可以將可打印內容添加到新頁面，然後使用此插件進行打印。如果您的用戶未啟用 JavaScript，它將正常鏈接，在新窗口中打開您的內容（您可以在其中正常打印）。

jQuery PrintMe

這個插件非常基礎。您只需在要打印的 jQuery 元素上調用它，它就會調用打印預覽窗口。沒有真正的選項可言，它的工作方式完全符合您的預期。

雖然它不像其他插件那樣擁有所有選項，但此插件非常基礎，在我的測試瀏覽器中運行良好。我推薦這個的原因是您可以查看它的源代碼，並了解它如何逐步完成準備打印預覽的過程。如果您想自己動手（並添加其他功能和設置），它實際上是一個很好的起點。

我不指望這個插件提供支持。使用它，如果它有效，那就太好了！如果沒有，您需要找到其他東西（或者可以選擇按照下面概述的方法自己構建它）。

jQuery Print Preview 插件

列表中的最後一個是 jQuery Print Preview 插件。它旨在為訪問者提供網站打印版本的預覽。與傳統的打印預覽不同，此插件在一個模式窗口中包含所有內容和打印樣式。

此外，它與 SitePoint 文章一起發布，您可以在此處閱讀：When Visitors Print – About That Print Stylesheet。

該插件具有良好的瀏覽器支持（一直追溯到 IE6），但似乎不提供任何其他配置。它還有一些未解決的問題，因此可以得出結論，它不再積極維護。

如何自己構建此功能？

創建這種功能並不太難。這些插件在幕後所做的大部分工作是動態創建一個<iframe></iframe> 元素，將其添加到頁面（但使用CSS 定位到屏幕外），設置<iframe></iframe> 的內容，在<iframe></iframe> 上調用.print() ，然後在短時間延遲後將其移除。

以下是執行此操作的方法：

<code class="language-javascript">function openPrintDialogue(){
  $('<iframe>', {
    name: 'myiframe',
    class: 'printFrame'
  })
  .appendTo('body')
  .contents().find('body')
  .append(`
    <h1>Our Amazing Offer</h1>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975900525289.png" class="lazy" alt="5 jQuery Print Page Options ">  `);

  window.frames['myiframe'].focus();
  window.frames['myiframe'].print();

  setTimeout(() => { $(".printFrame").remove(); }, 1000);
};

$('button').on('click', openPrintDialogue);</iframe></code>

總結:

行業已經轉向不再打印頁面（您多久打印一次頁面？），因此這些插件中的幾個開始老化也就不足為奇了。

但是，有一些極端情況，打印頁面/頁面部分是有意義的。活動註冊/條形碼項目的打印就是一個例子，還有收據確認/購買證明。

如果您正在構建網站/網絡應用程序並且需要打印，您可能希望創建一個僅打印的 CSS 文件（參見：Create a Customized Print Stylesheet in Minutes）並完美調整您的佈局。或者，您可以使用上面概述的方法僅打印您感興趣的內容。這兩種解決方案都可以正常工作，但趨勢似乎正在轉向使用 CSS 來設置打印配置文件。

(FAQs 部分略去，因為這部分內容與插件本身關係不大，而且篇幅較長，可以根據需要自行補充)

以上是5 jQuery打印頁面選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！