jquery打印插件对比 jquery打印网页

转载

mob6454cc7042a2 2023-11-08 22:52:25

文章标签 jquery打印插件对比 python java 编程语言 javascript 文章分类 jQuery 前端开发

jquery 打印页面

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

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

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

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

jQuery打印预览

jquery打印插件对比 jquery打印网页_python

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

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

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

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

网站演示版

jQuery打印插件

jquery打印插件对比 jquery打印网页_python_02

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

要启动并运行，只需将其传递给jQuery对象或选择器，然后就可以使用了，其余的工作由插件完成。

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

网站 Github 演示版

jQuery printPage插件

jquery打印插件对比 jquery打印网页_jquery打印插件对比_03

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

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

Github 演示版

jQuery PrintMe

<source type="image/webp"><source><img src="https://s2.51cto.com/images/blog/202309/23052449_650e0621209af24174.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">

jquery打印插件对比 jquery打印网页_jquery打印插件对比_04

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

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

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

网站演示版

jQuery Print预览插件

jquery打印插件对比 jquery打印网页_java_05

列表上的最后一个是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会提供有关此技术的有趣的帖子（或稍微有些陈旧）。