npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ezeep/ezeep-js

v1.0.235

Published

A JavaScript library to enable easy and fast printing on any web application uising ezeep Blue.

Downloads

156

Readme

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 [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)

  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.

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