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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dmitrii-vasiliev.gitbook.io/docs/print-pro.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.