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()，然后在短时间延迟后将其移除。

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

function openPrintDialogue(){
  $('<iframe>', {
    name: 'myiframe',
    class: 'printFrame'
  })
  .appendTo('body')
  .contents().find('body')
  .append(`
    <h1 id="Our-Amazing-Offer">Our Amazing Offer</h1>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975900525289.png?x-oss-process=image/resize,p_40"  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);

总结:

行业已经转向不再打印页面（您多久打印一次页面？），因此这些插件中的几个开始老化也就不足为奇了。

但是，有一些极端情况，打印页面/页面部分是有意义的。活动注册/条形码项目的打印就是一个例子，还有收据确认/购买证明。

如果您正在构建网站/网络应用程序并且需要打印，您可能希望创建一个仅打印的 CSS 文件（参见：Create a Customized Print Stylesheet in Minutes）并完美调整您的布局。或者，您可以使用上面概述的方法仅打印您感兴趣的内容。这两种解决方案都可以正常工作，但趋势似乎正在转向使用 CSS 来设置打印配置文件。

(FAQs 部分略去，因为这部分内容与插件本身关系不大，而且篇幅较长，可以根据需要自行补充)

以上是5 jQuery打印页面选项的详细内容。更多信息请关注PHP中文网其他相关文章！