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

關(guān)鍵要點:

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

jQuery 打印插件概述:

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

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

jQuery Print Preview

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

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

它的瀏覽器支持似乎相當(dāng)全面，在我的現(xiàn)代瀏覽器上運行良好。

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

jQuery Print Plugin

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

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

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

jQuery printPage 插件

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

此插件創(chuàng)建一個帶有消息和圖像的小型模式窗口，在主瀏覽器打印模式加載之前加載。當(dāng)用于指向要打印內(nèi)容的錨標(biāo)記時，它似乎效果最佳。您可以將可打印內(nèi)容添加到新頁面，然后使用此插件進(jìn)行打印。如果您的用戶未啟用 JavaScript，它將正常鏈接，在新窗口中打開您的內(nèi)容（您可以在其中正常打?。?。

jQuery PrintMe

這個插件非?；A(chǔ)。您只需在要打印的 jQuery 元素上調(diào)用它，它就會調(diào)用打印預(yù)覽窗口。沒有真正的選項可言，它的工作方式完全符合您的預(yù)期。

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

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

jQuery Print Preview 插件

列表中的最后一個是 jQuery Print Preview 插件。它旨在為訪問者提供網(wǎng)站打印版本的預(yù)覽。與傳統(tǒng)的打印預(yù)覽不同，此插件在一個模式窗口中包含所有內(nèi)容和打印樣式。

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

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

如何自己構(gòu)建此功能？

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

以下是執(zhí)行此操作的方法：

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

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

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

$('button').on('click', openPrintDialogue);

總結(jié):

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

但是，有一些極端情況，打印頁面/頁面部分是有意義的?；顒幼?條形碼項目的打印就是一個例子，還有收據(jù)確認(rèn)/購買證明。

如果您正在構(gòu)建網(wǎng)站/網(wǎng)絡(luò)應(yīng)用程序并且需要打印，您可能希望創(chuàng)建一個僅打印的 CSS 文件（參見：Create a Customized Print Stylesheet in Minutes）并完美調(diào)整您的布局。或者，您可以使用上面概述的方法僅打印您感興趣的內(nèi)容。這兩種解決方案都可以正常工作，但趨勢似乎正在轉(zhuǎn)向使用 CSS 來設(shè)置打印配置文件。

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

以上是5 jQuery打印頁面選項的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！