5个jQuery打印页面选项

最新推荐文章于 2024-07-14 03:38:22 发布

dingshi7798

最新推荐文章于 2024-07-14 03:38:22 发布

阅读量307

点赞数

文章标签： javascript ui ViewUI

这篇颇受欢迎的文章已于2017年1月更新，以反映jQuery打印插件的当前状态。与该文章的先前版本有关的评论已删除。

您可能不知道的一件有趣的事是，您可以动态控制网站上的打印预览UI。默认情况下，浏览器将选择要打印的内容（很可能是整个窗口本身），但是有几个jQuery插件可以让您控制要打印的内容。

尽管打印插件可能不是最令人兴奋的插件，但您可能需要研究以下内容。如果您喜欢冒险，我们还将介绍如何自行构建此功能。

注意：使用某些插件时，古老的浏览器（我正在向您介绍IE8）可能会表现出奇怪的行为。但是，所有现代浏览器都以一致的方式处理打印预览，因此如果需要完全可比性，请记住这一点。

jQuery打印预览

这个小型jQuery插件可让您打开一个新的浏览器窗口，以显示网站的特定部分进行打印。与该列表中的某些其他插件不同，此插件不会直接触发浏览器的打印功能，它只会打开一个最小的窗口（这很完美，因为您现在可以直接打印它）。

该插件的用途是当您有要打印的数据部分时，例如信息卡或表中的一行。您可以在新窗口（为插件提供配置选项）中打开它，然后从那里打印。这样可以确保只打印所需的内容。

它的浏览器支持似乎非常全面，并且在我的现代浏览器中运行良好。

不幸的是，它不在GitHub上，因此很难知道它是否受到积极支持。但这并不能阻止您，您应该查看它是否对您有用，然后按原样使用它。

网站
 演示版

jQuery打印插件

不要让这个丑陋的演示欺骗了您。 jQuery Print Plugin效果很好，并提供了一系列设置供您自定义打印需求。例如，您可以设置弹出窗口是否将在当前寡妇中发生（通过iFrame），设置在打印显示呈现之前要等待的时间，以及在弹出窗口之前/之后放置内容。

要启动并运行，只需将其传递给jQuery对象或选择器，然后其余的就由插件执行。

作者在2016年提出了一些承诺来改进插件。尽管提交的次数不多，但看起来它仍会继续增长。

网站
 Github
演示版

jQuery printPage插件

让我们先使用此插件。它已经很长时间没有更新了。虽然有些人可能会发现它是6年前的最新更新，但仍会逃之sight。其他人（包括我自己）可以看到它是一个简单的插件，可以正常工作。

该插件创建一个带有消息和图像的小模式窗口，在主浏览器打印模式之前加载。当在指向您要打印的内容的定位标记上使用时，它似乎效果最好。您可以将可打印内容添加到新页面，然后使用此插件进行打印。如果您的用户未启用JavaScript，它将正常链接，在新窗口中打开您的内容（您可以在其中正常打印）

Github
演示版

jQuery PrintMe

这个插件是基本的。您在这里要做的就是在要打印的jQuery元素上调用它，它将调用打印预览窗口。没有真正的选择可言，它的功能完全符合您的想象。

虽然它没有其他插件可能具有的所有选项。这个插件是基本的，并且可以在我测试过的所有浏览器上正常工作。我之所以推荐这个插件，是因为您可以查看它的源代码，并查看它如何逐步完成准备打印预览的过程。如果您想自己解决这个问题（并添加其他功能和设置），这实际上是一个很好的起点。

我不希望这个插件得到支持。使用它，如果它有效，那就太好了！如果不是，则需要查找其他内容（或选择自己构建，如下所述）

网站
 演示版

jQuery打印预览插件

列表上的最后一个是jQuery Print Preview插件。旨在为访问者提供网站的印刷版预览。与传统的打印预览不同，此插件可在模式窗口中引入所有内容和打印样式。

作为额外的奖励，它与SitePoint文章一起发布，您可以在此处阅读：访客打印时–关于该打印样式表。

该插件具有良好的浏览器支持（一直到IE6），但似乎没有提供任何其他配置。它还有很多未解决的问题，因此可以得出结论，不再积极维护它。

网站
 演示版

我如何建立自己的？

自己创建这种功能并不难。然而，大多数这些插件都在做幕后是动态创建一个<iframe>元素，它附加到页面（但位于关屏使用CSS），设置的内容<iframe>称.PRINT）（上iframe，然后在短暂的延迟后将其删除。

这是您要执行的操作。

function openPrintDialogue(){
  $('<iframe>', {
    name: 'myiframe',
    class: 'printFrame'
  })
  .appendTo('body')
  .contents().find('body')
  .append(`
    <h1>Our Amazing Offer</h1>
    <img src='coupon.png' />
  `);

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

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

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

这是此技术的实际演示。按下“ 打印优惠券”按钮时，您会注意到打印预览仅显示优惠券和标题。最好在类似Chrome的浏览器中查看，该浏览器可为您提供打印预览。如果您在Firefox中尝试此操作，请将输出另存为PDF以查看结果。

如果您想了解更多信息，Ben Nadel会提供有关此技术的有趣的帖子/视频（如果年龄不大的话）。