@ezeep/ezeep-js
v1.0.235
Published
A JavaScript library to enable easy and fast printing on any web application uising ezeep Blue.
Downloads
9,317
Readme
ezeep.js
Overview
The ezeep.js JavaScript library implements the ezeep Blue API to easily offer printing capabilities to any web application. Integrate a printing feature to your web application with just a few steps.
Integration Guide
Getting started
Sign up for an ezeep Blue account. This creates an administrator account and a new ezeep organization. Sign up here. After successfully signup, you can manage your ezeep organization here.
Register your web application to receive your Client-ID. Contact the ezeep team at [email protected] and provide the Redirect Uri of your web application. This Uri must host the ezeep.js component. (Here are more details on OAuth workflows and Client-ID/Redirect Uri)
Download the ezeep Blue Connector and install it on a machine (e.g. your local machine) with a printer on the same network. After the installation you are prompted to authenticate with your ezeep Account. Your printers in your network will be discovered automatically and advertised to the ezeep Administration Portal.
Angular Integration
ezeep.js is available as Angular library as well. Instructions on how to setup ezeep.js with Angular can be found here.
JavaScript Integration
Important: You need to set up your server with https!
- Include ezeep.js to your web app by the following options:
Use script tags in your html source:
<!-- use latest version -->
<script type="module" src="https://cdn.ezeep.com/ezeep-js/ezeep.esm.js"></script>
<script nomodule src="https://cdn.ezeep.com/ezeep-js/ezeep.js"></script>
<!-- use specific version -->
<script type="module" src="https://cdn.ezeep.com/ezeep-js/v0.1.50/ezeep.esm.js"></script>
<script nomodule src="https://cdn.ezeep.com/ezeep-js/v0.1.50/ezeep.js"></script>Use npm:
npm install @ezeep/ezeep-js- Add the ezp-printing tag to your html source.
<ezp-printing></ezp-printing>There are multiple required and optional attributes the ezp-printing element needs in order to provide the print functionality.
| Attribute | Description | Type | Required | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------- | | clientid | Your registered Client-ID (see above). | string | Yes | | redirecturi | Your registered Redirect Uri (see above). | string | Yes | | trigger | button: renders a print button that opens the print dialog upon clicking itcustom: renders no element, but allows create a custom element or trigger to open the print dialogfile: renders a an area to allow drag and drop of a file | string | Yes | | fileurl | A url pointing to a file that should be printed. E.g. https://your-site.com/myfile.pdf | string | Required, if trigger is set to button or custom. | | filename | The name of the file that is printed. | string | No. Only used for trigger button and custom. | | filetype | The type of the file that is printed. | string | No. Only used for trigger button and custom. | | hidelogin | If set to true, no additional info popup is shown before the user authentication. | boolean | No | | hidemenu | If set to true, the menu is not shown. | boolean | No | | authapihosturl | Overrides the default URL of the authentication API. | string | No | | printapihosturl | Overrides the default URL of the printing API. | string | No | | theme | The overall color theme. Possible colors are pink, red, orange, green, cyan, blue and violet. | string | No | | appearance | Sets the overall appearance to "light", "dark" or the "system" default. | string | No | | language | Overrides the browserlanguage. Possible values are "de" for German and "en" for English. | string | No |
Example with button trigger
To get started, you can use the default ezeep print button within your web app:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<script type="module" src="https://cdn.ezeep.com/ezeep-js/ezeep.esm.js"></script>
<script nomodule src="https://cdn.ezeep.com/ezeep-js/ezeep.js"></script>
<title>ezeep-js</title>
</head>
<body>
<ezp-printing
clientid="your-client-id"
redirecturi="https://your-site.com/"
trigger="button"
fileurl="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
filename="dummypdf"
filetype="pdf"
>
</ezp-printing>
</body>
</html>Example with custom trigger
If you want to bind the printing process to a custom html element, you can use this example:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<script type="module" src="https://cdn.ezeep.com/ezeep-js/ezeep.esm.js"></script>
<script nomodule src="https://cdn.ezeep.com/ezeep-js/ezeep.js"></script>
<title>ezeep-js</title>
<style>
.customButton {
background-color: DodgerBlue;
border: none;
border-radius: 6px;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.customButton:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<ezp-printing
clientid="your-own-client-id"
redirecturi="https://your-site.com/"
trigger="custom"
filename="dummypdf"
fileurl="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
filetype="pdf"
>
<button class="customButton">My custom styled print button</button>
</ezp-printing>
<script>
const ezpPrinting = document.querySelector('ezp-printing')
const button = document.querySelector('button')
button.onclick = async () => await ezpPrinting.open()
</script>
</body>
</html>Example with file trigger (Drag&Drop)
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<script type="module" src="https://cdn.ezeep.com/ezeep-js/ezeep.esm.js"></script>
<script nomodule src="https://cdn.ezeep.com/ezeep-js/ezeep.js"></script>
<title>ezeep-js</title>
<style>
/*
you can set the width and height of the upload field, for example like this:
(if no width or height is set, it defaults to "auto")
*/
:root {
--ezp-upload-width: calc(80vw);
--ezp-upload-height: calc(80vh);
}
</style>
</head>
<body>
<ezp-printing
clientid="oWuvEAndErO3kKCqzaWBOAs2PhOuAbD7MZYWQ9yJ"
redirecturi="https://develop.dev.azdev.ezeep.com:3333"
trigger="file"
theme="blue"
appearance="system"
>
</ezp-printing>
</body>
</html>Contribution Guide
Make sure you follow the GitHub flow if you want to contribute. Clone and create a branch for your contribution. When finished, create a pull request for the main branch.
Important: You need to set up your development server with https!
The stencil.config is already set up to do exactly this in your development environment.
You'll need a certificate and key for this aswell as a .env file placed at the root of the project.
To generate a self signed certificate execute the following command (use (git) bash!):
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out certificate.pemand follow the steps to generate a key.pem and certificate.pem.
In your .env file specify the following variables:
DEV_SERVER_ADDRESS="your-server-address.com"
DEV_SERVER_PORT= portnumberAdditionally, you need to uncomment the "devServer" option in the stencil config file.
Make sure to comment out the "devServer" option before pushing to the repository!
Clone this repository to a new directory:
git clone https://github.com/ezeep/ezeep-js.git
cd ezeep-jsInstall project dependencies and start the project:
npm install
npm startBuild components for production:
npm run buildFormat source code:
npm run format