1.0.235 • Published 2 months ago

@ezeep/ezeep-js v1.0.235

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

ezeep.js

Node.js Build

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

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

  2. Register your web application to receive your Client-ID. Contact the ezeep team at helpdesk@ezeep.com 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)

  3. 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!

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

AttributeDescriptionTypeRequired
clientidYour registered Client-ID (see above).stringYes
redirecturiYour registered Redirect Uri (see above).stringYes
triggerbutton: 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 filestringYes
fileurlA url pointing to a file that should be printed. E.g. https://your-site.com/myfile.pdfstringRequired, if trigger is set to button or custom.
filenameThe name of the file that is printed.stringNo. Only used for trigger button and custom.
filetypeThe type of the file that is printed.stringNo. Only used for trigger button and custom.
hideloginIf set to true, no additional info popup is shown before the user authentication.booleanNo
hidemenuIf set to true, the menu is not shown.booleanNo
authapihosturlOverrides the default URL of the authentication API.stringNo
printapihosturlOverrides the default URL of the printing API.stringNo
themeThe overall color theme. Possible colors are pink, red, orange, green, cyan, blue and violet.stringNo
appearanceSets the overall appearance to "light", "dark" or the "system" default.stringNo
languageOverrides the browserlanguage. Possible values are "de" for German and "en" for English.stringNo

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

and 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= portnumber

Additionally, 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-js

Install project dependencies and start the project:

npm install
npm start

Build components for production:

npm run build

Format source code:

npm run format
@azure/storage-blob@cortado-holding/colors@cortado-holding/utils@stencil/corefetch-intercepti18nextwhatwg-fetch
@infinitebrahmanuniverse/nolb-_ez@everything-registry/sub-chunk-309@ezeep/ngx-ezeep-js
1.0.235

2 months ago

1.0.234

2 months ago

1.0.233

2 months ago

1.0.232

2 months ago

1.0.231

3 months ago

1.0.230

4 months ago

1.0.229

4 months ago

1.0.228

5 months ago

1.0.227

5 months ago

1.0.226

5 months ago

1.0.224

10 months ago

1.0.225

10 months ago

1.0.220

1 year ago

1.0.221

1 year ago

1.0.219

1 year ago

1.0.217

2 years ago

1.0.216

2 years ago

1.0.213

2 years ago

1.0.212

2 years ago

1.0.215

2 years ago

1.0.214

2 years ago

1.0.200

2 years ago

1.0.206

2 years ago

1.0.205

2 years ago

1.0.208

2 years ago

1.0.207

2 years ago

1.0.202

2 years ago

1.0.201

2 years ago

1.0.204

2 years ago

1.0.203

2 years ago

1.0.211

2 years ago

1.0.210

2 years ago

1.0.209

2 years ago

1.0.189

2 years ago

1.0.198

2 years ago

1.0.197

2 years ago

1.0.194

2 years ago

1.0.193

2 years ago

1.0.196

2 years ago

1.0.195

2 years ago

1.0.190

2 years ago

1.0.192

2 years ago

1.0.191

2 years ago

1.0.187

2 years ago

1.0.186

2 years ago

1.0.188

2 years ago

1.0.183

2 years ago

1.0.182

2 years ago

1.0.185

2 years ago

1.0.184

2 years ago

1.0.181

2 years ago

1.0.180

2 years ago

1.0.176

2 years ago

1.0.178

2 years ago

1.0.177

2 years ago

1.0.179

2 years ago

1.0.172

2 years ago

1.0.171

2 years ago

1.0.170

2 years ago

1.0.165

2 years ago

1.0.164

2 years ago

1.0.167

2 years ago

1.0.166

2 years ago

1.0.163

2 years ago

1.0.169

2 years ago

1.0.143

2 years ago

1.0.142

2 years ago

1.0.145

2 years ago

1.0.144

2 years ago

1.0.141

2 years ago

1.0.140

2 years ago

1.0.147

2 years ago

1.0.146

2 years ago

1.0.149

2 years ago

1.0.148

2 years ago

1.0.139

2 years ago

1.0.138

2 years ago

1.0.137

2 years ago

1.0.161

2 years ago

1.0.160

2 years ago

1.0.154

2 years ago

1.0.156

2 years ago

1.0.155

2 years ago

1.0.150

2 years ago

1.0.151

2 years ago

1.0.158

2 years ago

1.0.157

2 years ago

1.0.159

2 years ago

1.0.132

2 years ago

1.0.131

2 years ago

1.0.134

2 years ago

1.0.133

2 years ago

1.0.130

2 years ago

1.0.136

2 years ago

1.0.135

2 years ago

1.0.123

2 years ago

1.0.101

2 years ago

1.0.129

2 years ago

1.0.107

2 years ago

1.0.128

2 years ago

1.0.106

2 years ago

1.0.109

2 years ago

1.0.108

2 years ago

1.0.125

2 years ago

1.0.103

2 years ago

1.0.124

2 years ago

1.0.102

2 years ago

1.0.127

2 years ago

1.0.105

2 years ago

1.0.126

2 years ago

1.0.104

2 years ago

1.0.88

2 years ago

1.0.87

2 years ago

1.0.86

2 years ago

1.0.85

3 years ago

1.0.89

2 years ago

1.0.110

2 years ago

1.0.112

2 years ago

1.0.111

2 years ago

1.0.117

2 years ago

1.0.114

2 years ago

1.0.113

2 years ago

1.0.116

2 years ago

1.0.115

2 years ago

1.0.91

2 years ago

1.0.90

2 years ago

1.0.95

2 years ago

1.0.94

2 years ago

1.0.93

2 years ago

1.0.92

2 years ago

1.0.99

2 years ago

1.0.96

2 years ago

1.0.84

3 years ago

1.0.83

3 years ago

1.0.82

3 years ago

1.0.81

3 years ago

1.0.80

3 years ago

1.0.79

3 years ago

1.0.78

3 years ago