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

關(guān)鍵要點(diǎn):

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

jQuery 打印插件概述:

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

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

jQuery Print Preview

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

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

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

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

jQuery Print Plugin

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

要開始運(yùn)行，只需向其傳遞一個(gè) jQuery 對(duì)像或選擇器即可，插件會(huì)完成其餘工作。

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

jQuery printPage 插件

讓我們直接談?wù)勥@個(gè)插件。它很久沒(méi)有更新了。雖然有些人可能會(huì)因?yàn)榭吹剿洗胃率窃?6 年前而感到不安，但其他人（包括我自己）可以看到它是一個(gè)簡(jiǎn)單的插件，它可以正常工作。

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

jQuery PrintMe

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

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

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

jQuery Print Preview 插件

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

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

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

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

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

以下是執(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)向不再打印頁(yè)面（您多久打印一次頁(yè)面？），因此這些插件中的幾個(gè)開始老化也就不足為奇了。

但是，有一些極端情況，打印頁(yè)面/頁(yè)面部分是有意義的?；顒?dòng)註冊(cè)/條形碼項(xiàng)目的打印就是一個(gè)例子，還有收據(jù)確認(rèn)/購(gòu)買證明。

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

(FAQs 部分略去，因?yàn)檫@部分內(nèi)容與插件本身關(guān)係不大，而且篇幅較長(zhǎng)，可以根據(jù)需要自行補(bǔ)充)

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