🔗

Link to plugin page: https://zeroqode.com/plugin/print-pro-1528969499158x537880196351262700

Demo to preview the settings

❕

Bubble Editor: https://bubble.is/page?type=page&name=datatables&id=zeroqode-demo-16&tab=tabs-1

❕

Live Demo: https://zeroqode-demo-16.bubbleapps.io/datatables

Introduction

Print Pro gives apps the ability to print the current page, Print based on a custom stylesheet, skip elements, print an element, create a HTML template to insert dynamic data into or create a template with custom HTML, JavaScript, CSS & dynamic data all in one.

This means no more APIs or 5 second+ wait times for an invoice, receipt, flyer or anything else you create.

The entire plugin is wrapped up into just a few actions. Everything is fairly easy to understand although should you require support please let us know.

How to setup

The plugin has 3 elements: PDF Viewer, Print Toolkit, and Print Pro Viewer. You just need to place each of them on the page and get started.

Plugin Element proprieties

1) PDF Viewer

Display the content of a pdf file from the given URL.

Properties fields:

PDF URL - Link to the pdf file you want to view.

Exposed states:

Viewer ID - return ID of the viewer. Need to print this viewer by ID.

2) Print Toolkit

This element is a powerful tool to print different things.

Exposed states:

HTML Output - stores HTML code of printed things.

Actions

1) Print Elements a PrintToolkit

Proprieties fields:

Page Title - Title of the printed page. This text will be displayed at top of the page.

ID of Elements to Print - Print an element by it's Id. The value should look like this "elementid" without #.

Import Pages's CSS? - Use .css files included on the current page.

Import Page's Style? - Use styles from <style></style> tags of current page

External CSS Files URL - Import style from custom .css. Example of input value: https://www.w3schools.com/w3css/4/w3.css

Remove Inline Styles From Page? - Remove inline styles from print elements. Example of inline style: style="color:red;font-size:16px;" .

Set Print Delay (ms, the More you print the longer this need's to be!) - Waiting time before printing starts.

Add HTML Header to Document? - This HTML content will be printed before the element.

Add HTML Footer to Document? - This HTML content will be printed after the element.

Copy Form Values? (Enhances the look of input fields) - Preserve input/form values.

Print Canvas Elements? - Copy canvas content

HTML Doc Type - Enter a different doctype for older markup

Debug Mode - Show the iframe for debugging

2) Print HTML Template a PrintToolkit

Print HTML content from the field.

Proprieties fields:

custom HTML Template - HTML code for print.

Timeout - Waiting time before printing starts.

Output the template but don't Print - Yes or No. If No Output the template but don't Print.

❕

This action writes in "HTML Output" state the HTML code for printing.

3) Print HTML Template (Advanced) a PrintToolkit

Proprieties fields:

Custom CSS - Custom internal CSS code. Tags <style></style> should be used.

Example:

javascript
  <style>
        body {
          background-color: yellow;
        }
  </style>

custom CSS URL - Custom external .css file.

Example:

javascript
<link rel="stylesheet" href="https://your.url/filename.css">

Custom Head Javascript - Custom JavaScript code. Tags <script></script> should be used.

Example:

javascript
    <script type="text/javascript">
      console.log('Hello from ZQ!');
    </script>

Custom Head Javascript URL - Custom script from the source.

Example:

javascript
<script src="https://your.url/filename.js"></script>

Custom Body Javascript - Custom JavaScript code. Tags <script></script> should be used.

Example:

javascript
<script>
      let custom_script = 'Hello';
</script>

Custom Body Javascript URL - Custom script from the source.

Example:

javascript
<script src="https://your-another.url/filename.js"></script>

Custom Head HTML (remove tags!) - This HTML code will be written in the head of your HTML document. Tags <head></head> are enabled by default.

Example:

javascript
<meta charset="utf-8">
<title>Example</title>

Custom Body HTML (remove tags!) - Main HTML content of your page. Tags <body></body> enabled by default.

Example:

javascript
    <div class="main">
      <div class="content">
        Content of page
      </div>
    </div>

Custom HTML Header - This HTML content will be displayed at the top of the page, before body content.

Example:

javascript
    <header>
      <div>
        <span>Your custom header text</span>
      </div>
    </header>

Custom Footer HTML - This HTML content will be displayed at the bottom of the page, after body content.

Example:

javascript
    <footer>
      <div class="custom">
        Footer content here
      </div>
    </footer>

Timeout - Waiting time before printing starts.

Output the template but dont Print - Yes or No. If No Output the template but don't Print.

Resulting HTML

javascript
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!--   Custom CSS     -->
    <style>
        body {
          background-color: yellow;
        }
    </style>
    <!-- Custom CSS End   -->
    
    <!-- Custom CSS URL -->
    <link rel="stylesheet" href="https://your.url/filename.css">
    <!-- Custom CSS URL End -->
    
    <!-- Custom Head Javascript -->
    <script type="text/javascript">
      console.log('Hello from ZQ!');
    </script>
    <!-- Custom Head Javascript End -->
    
    <!-- Custom Head Javascript URL -->
    <script src="https://your.url/filename.js"></script>
    <!-- Custom Head Javascript URL End -->
    
    <!-- Custom Head HTML (remove tags!) -->
    <meta charset="utf-8">
    <title>Example</title>
    <!-- Custom Head HTML (remove tags!) End -->
  </head>
  <body>
    <!-- Custom HTML Header -->
    <header>
      <div>
        <span>Your custom header text</span>
      </div>
    </header>
    <!-- Custom HTML Header End -->
    
    <!-- Custom Body Javascript -->
    <script>
      let custom_script = 'Hello';
    </script>
    <!-- Custom Body Javascript End -->
    
    <!-- Custom Body Javascript URL -->
    <script src="https://your-another.url/filename.js"></script>
    <!-- Custom Body Javascript URL End -->
    
    <!-- Custom Body HTML (remove tags!) -->
    <div class="main">
      <div class="content">
        Content of page
      </div>
    </div>
    <!-- Custom Body HTML (remove tags!) End -->
    
    <!-- Custom Footer HTML -->
    <footer>
      <div class="custom">
        Footer content here
      </div>
    </footer>
    <!-- Custom Footer HTML End -->
  </body>
</html>

4) Print Whole Page a PrintToolkit

This action prints the current page using Styles of them.

5) Invoice Builder a PrintToolkit

6) Print Another Page a Print Toolkit

This action creates an iframe and prints its contents.

Property fields:

Time to Allow Loading - Waiting time before printing. It needs to wait while the page is not loaded fully.

Print Page Named - URL of page.

7) Print Element Inline styles Print Toolkit

Print an element by ID.

‼️

On IOS devices action is compatible only with safari

Property fields:

Element ID - id of the element to print.

3) Print Pro Viewer

This element makes a preview for input HTML code.

Property fields:

HTML - HTML Code. Browser compatibility

ChangeLogs

Update 05/11/20 - Version 1.10.0

fixed styles

Update 07/12/20 - Version 1.11.0

fixed element positioning in PrintToolkit “Print elements” action

Update 29/12/20 - Version 1.12.0

minor bug fixes

Update 14/01/21 - Version 1.13.0

minor fixes for iOS devices

Update 21/04/21 - Version 1.17.0

fixed the problem with the action “Print Another Page”

Update 06/05/21 - Version 1.18.0

fixed issue with HTML display in Print Pro Viewer

Update 26/07/21 - Version 1.20.0

improve invoices template

Update 13/11/23 - Version: 1.22.0

Fixed the function “Print HTML Template (Advanced)”

Update 02/01/23 - Version: 1.23.0.

fixed action "Print HTML in Firefox

Update 24/02/23 - Version: 1.28.0

improved printing capabilities

Update 02/03/23 - Version: 1.29.0

improved printing quality

Update 11/04/23 - Version: 1.30.0

Added the field "File name" to the actions of the element "Print Toolkit".

Update 14/09/23 - Version: 1.33.0

Minor updates

Update 13/11/23 - Version: 1.36.0

Fixed the problem with element without the gantry height

Update 15/02/24 - Version 1.39.0

Fixed "Print Element by Id" action

Update 22/04/24 - Version 1.40.0

Fixed Print element by ID action in Safari on IOS