jQuery Print Plugin allows you to control and customize which parts of the website are printed, providing an alternative to browser default printing capabilities (usually printing the entire window). This article will explore several popular jQuery printing plugins and demonstrate how to build this feature yourself.

Key points:

• jQuery Print Plugin allows you to control and customize which parts of the website are printed, providing an alternative to browser default printing capabilities (usually printing the entire window).
• jQuery Print Preview plugin opens a new browser window to display specific parts of the website for printing. This plugin is very useful for printing data parts such as information cards or a row in a table.
• jQuery Print Plugin provides a range of settings to customize printing requirements. For example, you can set it to pop up in the current window via iFrame, set the waiting time before the print display renders, and place content before or after the popup.
• If you want to try a more advanced solution, you can try to create a <iframe></iframe> element dynamically, add it to the page, set the content of <iframe></iframe>, call <iframe></iframe> on .print(), and then for a short time Remove it after delay.

jQuery Print Plugin Overview:

While printing plugins may not be the most exciting plugins, here are some plugins you might want to know about. We will also briefly explain how to build this feature yourself if you want to try a more advanced solution.

Note: Older browsers (I mean IE8) may have abnormal behavior when using certain plugins. However, all modern browsers handle print previews in a consistent way, so keep this in mind if you need full compatibility.

jQuery Print Preview

This small jQuery plugin allows you to open a new browser window to display specific parts of the website for printing. Unlike some other plugins on this list, this plugin doesn't touch the print functionality of the send browser, it just opens a minimal window (which is perfect, as you can print it directly now).

The purpose of this plugin is when you have some part of the data you want to print, such as an information card or a row in a table. You can open it in a new window (providing configuration options for the plugin) and print from there. This ensures that you only print what you want.

Its browser support seems to be quite comprehensive and works well on my modern browser.

Unfortunately, it is not on GitHub, so it is difficult to know if it is actively maintained. However, this should not stop you, you can see if it works for you and then use it as is.

jQuery Print Plugin

Don't be fooled by ugly demonstrations. jQuery Print Plugin works well and provides a range of settings for your custom printing needs. For example, you can set whether the popup is in the current window (via iFrame), set the waiting time before the print display renders, and place content before/after the popup.

To start running, just pass it a jQuery object or selector, and the plugin will do the rest.

The author released some submissions in 2016 to improve the plugin. Although there are not many submissions, it seems to be evolving.

jQuery printPage plugin

Let's talk about this plugin directly. It hasn't been updated in a long time. While some people may be upset by seeing it last updated 6 years ago, others (myself included) can see it as a simple plugin that works fine.

This plugin creates a small mode window with messages and images that is loaded before the main browser print mode loads. It seems to work best when used to point to the anchor marks to what you want to print. You can add printable content to a new page and then use this plugin to print. If your user does not enable JavaScript, it will link normally, opening your content in a new window (where you can print it normally).

jQuery PrintMe

This plugin is very basic. You just call it on the jQuery element you want to print and it will call the print preview window. There is no real option to speak of, it works exactly as you expect.

Although it doesn't have all the options like other plugins, this plugin is very basic and works well in my test browser. The reason I recommend this is that you can check its source code and see how it goes through step by step in preparing for a print preview. If you want to do it yourself (and add additional features and settings), it is actually a great place to start.

I don't expect this plugin to provide support. Use it, if it works, that would be great! If not, you need to find something else (or you can choose to build it yourself as outlined below).

jQuery Print Preview Plugin

The list is the jQuery Print Preview plugin. It is designed to provide visitors with a preview of the printed version of the website. Unlike traditional print previews, this plugin contains all content and print styles in a mode window.

In addition, it is published with the SitePoint article, which you can read here: When Visitors Print – About That Print Stylesheet.

The plugin has good browser support (dragged back to IE6), but doesn't seem to offer any other configuration. It also has some unresolved issues, so it can be concluded that it is no longer actively maintained.

How to build this function yourself?

Creating this feature is not too difficult. Most of the work these plugins do behind the scenes is to create a <iframe></iframe> element dynamically, add it to the page (but use CSS to locate it off-screen), set the content of <iframe></iframe>, and call <iframe></iframe> on .print() , and then remove it after a short delay.

The following is how to do this:

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);

Summary:

The industry has turned to no longer printing pages (how often do you print pages?), so it is no surprise that several of these plugins are starting to age.

However, there are some extreme cases where printing the page/page part makes sense. An example is the printing of the event registration/barcode item, as well as a receipt confirmation/purchase proof.

If you are building a website/web application and need to print, you may want to create a print-only CSS file (see: Create a Customized Print Stylesheet in Minutes) and adjust your layout perfectly. Alternatively, you can use the methods outlined above to print only what you are interested in. Both solutions work fine, but the trend seems to be shifting to using CSS to set up print profiles.

(The FAQs part is omitted, because this part of the content has little to do with the plug-in itself and is long, so you can add it yourself as needed)

The above is the detailed content of 5 jQuery Print Page Options. For more information, please follow other related articles on the PHP Chinese website!