jQuery Print Plugin

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

jQuery printing plugin; print specific elements on a page

License

jasonday/printThis

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Printing plug-in for jQuery

• Print specific & multiple DOM elements
• Preserve page CSS/styling ** or add new CSS; the world is your oyster!
• Preserve form entries
• Canvas support

$('#kitty-one, #kitty-two, #kitty-three').printThis( importCSS: false, loadCSS: "", header: "
Look at all of my kitties!
" >);

Covers common issues related to styling and printing limitations regarding page breaks

Now with TypeScript definitions.

Debug leaves the iframe visible on the page after printThis runs, allowing you to inspect the markup and CSS.

Copy CSS tags to the printThis iframe. On by default.

Copy CSS tags to the printThis iframe. On by default.

Includes the markup of the selected container, not just its contents. On by default.

Provide a URL for an additional stylesheet to the printThis iframe. Empty string (off) by default.

Use a custom page title on the iframe. This may be reflected on the printed page, depending on settings. Blank by default.

Eliminates any inline style attributes from the content. Off by default.

Filter which inline style attributes to remove. Requires removeInline to be true. Accepts custom CSS/jQuery selectors. Default is «*»

The amount of time to wait before calling print() in the printThis iframe. Defaults to 1000 milliseconds. Appropriate values depend heavily on the content and network performance. Graphics heavy, slow, or uncached content may need extra time to load.

A string or jQuery object to prepend or append to the printThis iframe content. null by default.

$('#mySelector').printThis( header: "
Amazing header
" >); $('#mySelector').printThis( footer: $('.hidden-print-header-content') >);

jQuery objects are cloned rather than moved.

The base option allows several behaviors. By default it is false , meaning a the current document will be set as the base URL.

If set to true , a attribute will be set if one exists on the page. If none is found, the tag is omitted, which may be suitable for pages with Fully Qualified URLs.

When passed as a string, it will be used as the href attribute of a tag.

This setting copies the current values of form elements into the printThis iframe. On by default.

Canvas elements will be copied to the printThis iframe and you can call printThis directly on a canvas element if you choose.

A doctype string to use on the printThis iframe. Defaults to the HTML5 doctype.

Deletes script tags from the content to avoid errors or unexpected behavior during print. Disabled by default.

Copies classes from the body and html tags into the printThis iframe.
Accepts true , «b» , «h» , or «bh» to test for «b» and «h» for body and html tags, respectively.

Copies style attributes from the body and html tags into the printThis iframe. Added to provide support for CSS Variables. Accepts true , «b» , «h» , or «bh» to test for «b» and «h» for body and html tags, respectively.

Function to run inside the iframe before the print occurs.
This function has not been validated on all browsers.

Function called before the iframe is populated with content.

Function called after the print and before the iframe is removed from the page.
This is called even if debug: true , which does not remove the iframe.

$("#mySelector").printThis( debug: false, // show the iframe for debugging importCSS: true, // import parent page css importStyle: true, // import style tags printContainer: true, // print outer container/$.selector loadCSS: "", // path to additional css file - use an array [] for multiple pageTitle: "", // add title to print page removeInline: false, // remove inline styles from print elements removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true printDelay: 1000, // variable print delay header: null, // prefix to html footer: null, // postfix to html base: false, // preserve the BASE tag or accept a string for the URL formValues: true, // preserve input/form values canvas: false, // copy canvas content doctypeString: '. ', // enter a different doctype for older markup removeScripts: false, // remove script tags from print content copyTagClasses: true, // copy classes from the html & body tag copyTagStyles: true, // copy styles from html & body tag (for CSS Variables) beforePrintEvent: null, // function for printEvent in iframe beforePrint: null, // function called before iframe is filled afterPrint: null // function called before iframe is removed >);

• «It’s not working» without any details is not a valid issue and will be closed
• A url, or html file, is necessary to debug. Due to the complexities of printing and this plugin, an example is the best way to debug
• When troubleshooting, set debug: true and inspect the iframe. Please report your findings when reporting an issue
• Every user should be active in the debugging process

This project exists thanks to all the people who contribute. [Contribute].

Become a financial contributor and help us sustain our community. [Contribute]

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

About

jQuery printing plugin; print specific elements on a page

Источник

jQuery Plugin To Print Any Part Of Your Page — Print

Print is an easy and simple jQuery plugin that allows the visitor to print only the specified area of your web page.

See also:

How to use it:

1. Specify an unique ID to your html element where you want to make it printable.

2. Create a button to print the specified html element.

3. Import the latest jQuery library and jQuery print plugin.

4. Call the plugin on the print button and done.

5. Available plugin settings.

$("#printable").print(< // Use Global styles globalStyles : false, // Add link with attrbute media=print mediaPrint : false, //Custom stylesheet stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata", //Print in a hidden iframe iframe : false, // Don't print this noPrintSelector : ".avoid-this", // Add this on top append : "Free jQuery Plugins
", // Add this at bottom prepend : "
jQueryScript.net", // Manually add form values manuallyCopyFormValues: true, // resolves after print and restructure the code for better maintainability deferred: $.Deferred(), // timeout timeout: 250, // Custom title title: null, // Custom document type doctype: '' >);

Changelog:

• Manually add form values , add a deferred object that resolves after print and restructure the code for better maintainability

This awesome jQuery plugin is developed by DoersGuild. For more Advanced Usages, please check the demo page or visit the official website.

Источник

jQuery Print Plugin

Include it in your HTML after importing jQuery, like:

$.print("#myElementId" /*, options*/); 

You can submit the options object like:

Currently this plugin supports the following options:

globalStyles

• Default: true
• Acceptable-Values: Boolean
• Function: Whether or not the styles from the parent document should be included

mediaPrint

• Default: false
• Acceptable-Values: Boolean
• Function: Whether or not link tags with media=’print’ should be included; Over-riden by the globalStyles option

stylesheet

• Default: null
• Acceptable-Values: URL-string
• Function: URL of an external stylesheet to be included

noPrintSelector

• Default: «.no-print»
• Acceptable-Values: Any valid jQuery-selector
• Function: A selector for the items that are to be excluded from printing

iframe

• Default: true , creates a hidden iframe if no-vaild iframe selector is passed
• Acceptable-Values: Any valid jQuery-selector or Boolean
• Function: Whether to print from an iframe instead of a pop-up window; can take the jQuery-selector of an existing iframe as value

append/prepend

• Default: null
• Acceptable-Values: Any valid jQuery-selector or HTML-text
• Function: Adds custom HTML before (prepend) or after (append) the selected content

Tested with

jQuery

Browsers

License

Demo

jQuery.print is maintained by DoersGuild
This page was generated by GitHub Pages. Tactile theme by Jason Long.

Источник

Как распечатать web-страницу с помощью jQuery?

Довольно часто пользователи и web-разработчики задаются вопросом — Как распечатать определённый блок страницы сайта или отдельную удалённую страницу? Не стоит заново изобретать велосипед, достаточно воспользоваться плагином jQuery Print Page.

Как использовать?

Скрипт, вызов печати при нажатии на кнопку или ссылку с классом printPage

Сама ссылка в href будет содержать в себе url нужной страницы

Дополнительные параметры

Они не обязательны, но могут пригодиться:

url: переписывает автоматическое значение url в атрибуте href
attr: изменяет атрибут href, который стоит по умолчанию для получения URL адреса страницы.
message: текст, который будет отображаться до тех пор, пока страница для печати полностью не загрузится.

Пример работы печати страницы jQuery и исходники

Пример прост. Есть главный файл со скриптом и моделью как указана выше. Также есть два других html-файла, которые хотим распечатать с первой страницы, только нажав на ссылку.

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
 
 
 
 
 
 
  
 
 
Пример:
 
При нажатии на кнопку, будет подгружен iframe и напечатан!
 
Печатать первой страницы
 
Печатать второй страницы
 
 

Спасибо за внимание! Печатайте без проблем и создания лишних файлов css!)

Источник