> For the complete documentation index, see [llms.txt](https://dmitrii-vasiliev.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dmitrii-vasiliev.gitbook.io/docs/print-pro.md).

# Print Pro

## 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.

## How to setup

The plugin has 3 elements. You just need to place each of them on the page and get started.

## Plugin fields, events, actions and states

### PDF Viewer

Display content of an pdf file from given URL.

![](/files/-MZr2JrBhvI2WgR_qK7J)

#### Fields

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

#### Exposed states

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

### Print Toolkit

This element is powerful tool to print different things.

**Exposed states**

**`HTML Output`** - stores HTML code of printed things.

#### Actions

1\)   **Print Elements**

![Action fields](/files/-MZrBpITHtcgI20tf2zh)

![Action fields](/files/-MZrBu4-Kbhdsgj9yyvQ)

![Action result](/files/-MZrCB3dCACmTsbm8CaS)

**Fields**

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

![](/files/-MZrD8aJjr_7jCKBee9V)

**`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 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: `<div`` `**`style="color:red;font-size:16px;"`**`>Text in 'style' is named inline style</div>`

**`Set Print Delay (ms, 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 element.

**`Add HTML Footer to Document?`** - This HTML content will be printed after 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**

Print html content from field.

![Action fields](/files/-MZrS0WtiBQ0YLUkdKFb)

**Fields**

**`custom HTML Template`** - HTML code for print

**`Timeout`**- Waiting time before printing starts.

**`Output the template but dont Print`** - `Yes` or `No`. If `No` Output the template but dont Print.

{% hint style="info" %}
This action write in state **`HTML Output`** Printed HTML code
{% endhint %}

3\)   **Print HTML Template (Advanced)**

![Action fileds](/files/-MZvZL09pqA8QUKK9RI5)

![Action fields](/files/-MZvZQSQ-7XR5Z8U7Oac)

![Action fields](/files/-MZvZTQc10jnnZcwbky3)

**Fields**

**`Custom CSS`** - Custom [internal ](https://www.w3schools.com/html/html_css.asp)css code. Tags `<style></style>` should be used.  Example:&#x20;

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

**`custom CSS URL`** - Custom [external ](https://www.w3schools.com/html/html_css.asp).css file. Example:

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

**`Custom Head Javascript`** - Custom JavaScript code. Tags `<script></script>` should be used. Example:

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

**`Custom Head Javascript URL`** - Custom script from source. Example:

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

**`Custom Body Javascript`** - Custom JavaScript code. Tags `<script></script>` should be used. Example:

```markup
<script>
      let custom_script = 'Hello';
</script>
```

**`Custom Body Javascript URL`** - Custom script from source. Example:

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

**`Custom Head HTML (remove tags!)`** - This HTML code will be writen in [head ](https://www.w3schools.com/html/html_head.asp)of your HTML document. Tags `<head></head>` enabled by default. Example:

```markup
<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:

```markup
    <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:

```markup
    <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:

```markup
    <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 dont Print.

**Resulting HTML**

```markup
<!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**

This action print current page using Styles of them.

5\)   **Invoice Builder**

![Action fields](/files/-MZvlyztlEVd_Mlqv-bM)

![Action fields](/files/-MZvm1mfyL2OKafkHkNF)

![Action fields](/files/-MZvm5V38PjSsHnNRWqH)

![Result](/files/-MZvmCm3LecTiyR4nW-P)

6\)   **Print Another Page**

This action creates an iframe and prints its contents.

![](/files/-MZvnmuLB34K12XrKxLI)

**Fields**

**`Time to Allow Loading`** - Waiting time befor printing. It need to wait while page is not loaded full.

**`Print Page Named`** - URL of page.

7\)   **Print Element Inline styles**

Print an element by ID.

![Action fields](/files/-MZvstB2YV2Ht43VfTGK)

**Fields**

**`Element ID`** - id of element to print.

### **Print Pro Viewer**

This element make preview for input HTML code.

![](/files/-MZvp5BmWDTjvS-ygkvZ)

**Fields**

**`HTML`** - HTML Code.