Print Magic logo

Print Magic

Published December 2021
   •    Updated today

Plugin details

Using deep CSS techniques "Print Magic" sends any HTML snippet that can be placed into a DIV tag straight to the browser print dialog without using IFRAMEs, popups, or new browser tabs.
New addition, a paper thin wrapper around the client-side Print.js library from Crabbly, written by Rodrigo Vieira. This plugin also provides a re-factored interface to Julius Koenig's download element, that removes the dependence on Element Ids and conforms more tightly to Bubble's action-state-event pattern.

* iOS and macOS  caveat emptor: AirPrint resolves viewport units to the dimensions of the browser window NOT the physical dimensions of the printed media. The safest way to work with AirPrint is to specify the physical dimensions of the width and height, in millimetres.

* iOS and macOS caveat emptor: On these systems FireFox blocks all attempts to raise the print dialog. In which case this action will simply not work.

* Open source caveat emptor: You can try understanding this code base. However at just under 300 lines of JS this plugin is packed full of subtle and nuanced CSS, HTML, and JS methods, and "just barely" works as is.

Free

For everyone

5.0 stars   •   2 ratings
198 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Aaron Sheldon logo
Aaron Sheldon
Joined 2021   •   9 Plugins
View contributor profile

Instructions

The "Print Magic" plugin contains only one client side action, "Print Magic", which accepts the following fields:
"CSS Selectors" a list of style selector queries. Each item is treated as a single query placed inside a STYLE element. Use this to customize the printed rendering.

"HTML Pages" a list of static HTML snippets that can be embedded into a DIV element. Each item in the list is printed on at least one independent page.

"Copies" the number of copies of the pages to print. This creates actual copies of the pages. It does not forward a copy count to the print dialog.

"Margin" the physical margin of the page, in millimetres, to request from the print manager. May or may not be respected by the print manager.

"Width" and "Height" must be specified together to be applied. Constrains the physical size of each HTML snippet item in millimetres, regardless of the available physical print media.

"Orientation" applies the orientation to each HTML snippet item, regardless of the print manager settings. When "Width" and "Height" are not supplied uses the viewport units to determine shortest and longest dimensions. See the caveat emptor regarding AirPrint shortcomings.

Drag the Print.js Client element onto the page to access the following actions:

"Download" the binary of a remote URL into local memory and provide a local URL pointing to the local file. Will raise "Download Started", "Download Progressed", and "Download Completed" events.

"Save" a local URL, raising the Share prompt when available, falling back to the Save file prompt, which in turn falls back to opening the local URL in a new tab.

"Print" a PDF or image from a URL, or a HTML or serialized JSON text directly. Will raise the "Print Started", Print Completed", and "Print Prompt Exited" events (may or may not be raised depending on browser).

"Close" a local file URL, freeing the memory resources.

All actions, in the case of an error will raise the "Action Failed" event.

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Productivity   •   Data (things)   •   Media   •   Mobile   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (5.0)

Wow, this prints good!
May 5th, 2023
I love printing things and this plugin makes doing so a dream.
It works well as the author describle!
May 12th, 2022
Everyone want to print HTML directly from bubble should use this!
Bubble