Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

printd

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

printd - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

6

index.d.ts
export declare function createStyle(doc: Document, cssText: string): HTMLStyleElement;
export declare function createLinkStyle(doc: Document, url: string): HTMLLinkElement;
export declare function createIFrame(parent?: HTMLElement): HTMLIFrameElement;

@@ -26,6 +27,7 @@ export interface PrintdCallbackArgs {

* @param el HTMLElement
* @param cssText Optional CSS Text that will add to head section of the iframe document
* @param styles Optional styles (css texts or urls) that will add to iframe document.head
* @param scripts Optional scripts (script texts or urls) that will add to iframe document.body
* @param callback Optional callback that will be triggered when content is ready to print
*/
print(el: HTMLElement, cssText?: string, callback?: PrintdCallback): void;
print(el: HTMLElement, styles?: string[], scripts?: string[], callback?: PrintdCallback): void;
/**

@@ -32,0 +34,0 @@ * Print an URL

64

index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var URL_LONG = /^(((http[s]?)|file):)?(\/\/)+([0-9a-zA-Z-_.=?&].+)$/g;
var URL_SHORT = /^([\.]?\/)([0-9a-zA-Z-_.=?&]+\/)*([0-9a-zA-Z-_.=?&]+)$/g;
var isValidURL = function (str) { return URL_LONG.test(str) || URL_SHORT.test(str); };
function createStyle(doc, cssText) {

@@ -10,2 +13,10 @@ var style = doc.createElement('style');

exports.createStyle = createStyle;
function createLinkStyle(doc, url) {
var style = doc.createElement('link');
style.type = 'text/css';
style.rel = 'stylesheet';
style.href = url;
return style;
}
exports.createLinkStyle = createLinkStyle;
function createIFrame(parent) {

@@ -42,6 +53,7 @@ if (parent === void 0) { parent = window.document.body; }

* @param el HTMLElement
* @param cssText Optional CSS Text that will add to head section of the iframe document
* @param styles Optional styles (css texts or urls) that will add to iframe document.head
* @param scripts Optional scripts (script texts or urls) that will add to iframe document.body
* @param callback Optional callback that will be triggered when content is ready to print
*/
Printd.prototype.print = function (el, cssText, callback) {
Printd.prototype.print = function (el, styles, scripts, callback) {
if (this.loading)

@@ -54,14 +66,40 @@ return;

this.elCopy = el.cloneNode(true);
if (this.elCopy) {
this.loading = true;
this.callback = callback;
var doc = contentWindow.document;
doc.open();
doc.write("\n <!DOCTYPE html><html><head><meta charset=\"utf-8\"></head><body></body></html>\n ");
if (cssText) {
doc.head.appendChild(createStyle(doc, cssText));
}
doc.body.appendChild(this.elCopy);
doc.close();
if (!this.elCopy)
return;
this.loading = true;
this.callback = callback;
var doc = contentWindow.document;
doc.open();
doc.write("\n <!DOCTYPE html><html><head><meta charset=\"utf-8\"></head><body></body></html>\n ");
// append custom styles
if (Array.isArray(styles)) {
styles.forEach(function (value) {
if (value) {
if (isValidURL(value)) {
doc.head.appendChild(createLinkStyle(doc, value));
}
else {
doc.head.appendChild(createStyle(doc, value));
}
}
});
}
// append element copy
doc.body.appendChild(this.elCopy);
// append custom scripts
if (Array.isArray(scripts)) {
scripts.forEach(function (value) {
if (value) {
var script = doc.createElement('script');
if (isValidURL(value)) {
script.src = value;
}
else {
script.innerText = value;
}
doc.body.appendChild(script);
}
});
}
doc.close();
};

@@ -68,0 +106,0 @@ /**

6

package.json
{
"name": "printd",
"version": "1.2.0",
"version": "1.3.0",
"description": "Print HTML elements in modern browsers.",

@@ -37,3 +37,3 @@ "repository": "joseluisq/printd",

"path": "./*.min.js",
"maxSize": "850B"
"maxSize": "1.5KB"
}

@@ -50,3 +50,3 @@ ],

"test": "npm run lint && karma start --single-run --reporters spec",
"test:bundle": "yarn test && yarn build && bundlesize",
"test:bundle": "yarn build && bundlesize",
"test:watch": "env NODE_ENV=debug karma start",

@@ -53,0 +53,0 @@ "lint": "tslint --format stylish --project tsconfig.json",

2

printd.umd.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.printd={})}(this,function(t){"use strict";function e(t,e){const i=t.createElement("style");return i.type="text/css",i.appendChild(window.document.createTextNode(e)),i}function i(t=window.document.body){const e=window.document.createElement("iframe");return e.setAttribute("src","about:blank"),e.setAttribute("style","visibility:hidden;width:0;height:0;position:absolute;z-index:-9999;bottom:0;"),e.setAttribute("width","0"),e.setAttribute("height","0"),e.setAttribute("wmode","opaque"),t.appendChild(e),e}class n{constructor(t=window.document.body){this.parent=t,this.loading=!1,this.iframe=i(this.parent),this.iframe.addEventListener("load",()=>this.loadEvent(),!1)}getIFrame(){return this.iframe}print(t,i,n){if(this.loading)return;const{contentDocument:o,contentWindow:a}=this.iframe;if(o&&a&&(this.iframe.src="about:blank",this.elCopy=t.cloneNode(!0),this.elCopy)){this.loading=!0,this.callback=n;const t=a.document;t.open(),t.write('\n <!DOCTYPE html><html><head><meta charset="utf-8"></head><body></body></html>\n '),i&&t.head.appendChild(e(t,i)),t.body.appendChild(this.elCopy),t.close()}}printURL(t,e){this.loading||(this.loading=!0,this.callback=e,this.iframe.src=t)}launchPrint(t){t.document.execCommand("print",!1,null)||t.print()}loadEvent(){if(this.iframe){this.loading=!1;const{contentDocument:t,contentWindow:e}=this.iframe;if(!t||!e)return;this.callback?this.callback({iframe:this.iframe,element:this.elCopy,launchPrint:()=>this.launchPrint(e)}):this.launchPrint(e)}}}t.createStyle=e,t.createIFrame=i,t.default=n,t.Printd=n,Object.defineProperty(t,"__esModule",{value:!0})});
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.printd={})}(this,function(t){"use strict";const e=/^(((http[s]?)|file):)?(\/\/)+([0-9a-zA-Z-_.=?&].+)$/g,i=/^([\.]?\/)([0-9a-zA-Z-_.=?&]+\/)*([0-9a-zA-Z-_.=?&]+)$/g,n=t=>e.test(t)||i.test(t);function r(t,e){const i=t.createElement("style");return i.type="text/css",i.appendChild(window.document.createTextNode(e)),i}function o(t,e){const i=t.createElement("link");return i.type="text/css",i.rel="stylesheet",i.href=e,i}function a(t=window.document.body){const e=window.document.createElement("iframe");return e.setAttribute("src","about:blank"),e.setAttribute("style","visibility:hidden;width:0;height:0;position:absolute;z-index:-9999;bottom:0;"),e.setAttribute("width","0"),e.setAttribute("height","0"),e.setAttribute("wmode","opaque"),t.appendChild(e),e}class s{constructor(t=window.document.body){this.parent=t,this.loading=!1,this.iframe=a(this.parent),this.iframe.addEventListener("load",()=>this.loadEvent(),!1)}getIFrame(){return this.iframe}print(t,e,i,a){if(this.loading)return;const{contentDocument:s,contentWindow:d}=this.iframe;if(!s||!d)return;if(this.iframe.src="about:blank",this.elCopy=t.cloneNode(!0),!this.elCopy)return;this.loading=!0,this.callback=a;const c=d.document;c.open(),c.write('\n <!DOCTYPE html><html><head><meta charset="utf-8"></head><body></body></html>\n '),Array.isArray(e)&&e.forEach(t=>{t&&(n(t)?c.head.appendChild(o(c,t)):c.head.appendChild(r(c,t)))}),c.body.appendChild(this.elCopy),Array.isArray(i)&&i.forEach(t=>{if(t){const e=c.createElement("script");n(t)?e.src=t:e.innerText=t,c.body.appendChild(e)}}),c.close()}printURL(t,e){this.loading||(this.loading=!0,this.callback=e,this.iframe.src=t)}launchPrint(t){t.document.execCommand("print",!1,null)||t.print()}loadEvent(){if(this.iframe){this.loading=!1;const{contentDocument:t,contentWindow:e}=this.iframe;if(!t||!e)return;this.callback?this.callback({iframe:this.iframe,element:this.elCopy,launchPrint:()=>this.launchPrint(e)}):this.launchPrint(e)}}}t.createStyle=r,t.createLinkStyle=o,t.createIFrame=a,t.default=s,t.Printd=s,Object.defineProperty(t,"__esModule",{value:!0})});

53

README.md
# Printd [![npm](https://img.shields.io/npm/v/printd.svg)](https://www.npmjs.com/package/printd) [![npm](https://img.shields.io/npm/dt/printd.svg)](https://www.npmjs.com/package/printd) [![Build Status](https://travis-ci.org/joseluisq/printd.svg?branch=master)](https://travis-ci.org/joseluisq/printd) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
> [Print](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) HTML elements in modern browsers. :printer:
> [Print](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) HTML elements or pages in modern browsers. :printer:
Printd opens your [Browser Print Dialog](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) to print HTML elements inside a blank document.
Printd opens your [Browser Print Dialog](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) to print HTML elements inside a blank document or pages by URL.

@@ -12,3 +12,5 @@ ## Features

- Print any element **_without_** opening a new window.
- Custom [CSS Text](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) support.
- Print only when assets such as images or fonts are ready (loaded).
- Print pages by URL.
- Add styles and scripts on demand using text or URL.

@@ -54,4 +56,4 @@ ## Demos

const d: Printd = new Printd()
d.print( document.getElementById('myelement'), cssText )
const d = new Printd()
d.print( document.getElementById('myElement'), cssText )
```

@@ -75,3 +77,3 @@

```ts
d.print (el, cssText, callback)
d.print (element, styles, scripts, callback)
```

@@ -81,16 +83,17 @@

- __element:__ The `HTMLElement` to print.
- __cssText:__ Optional [CSS Text](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) that will add to head section of the iframe document.
- __element:__ Some `HTMLElement` object to print.
- __styles:__ Optional styles (array of texts or urls) that will add to iframe (`document.head`)
- __scripts:__ Optional scripts (array of texts or urls) that will add to iframe (`document.body`)
- __callback:__ Optional callback that will be triggered when content is ready to print.
- __Callback arguments:__
- __iframe__: Iframe reference. `iframe` already contains `contentWindow` and `contentDocument` references.
- __element__: `HTMLElement` copy reference.
- __launchPrint__: Function to launch the print dialog after content was loaded.
- __callback arguments:__
- __iframe__: An `HTMLIFrameElement` reference. It already contains `contentWindow` and `contentDocument` references.
- __element__: An `HTMLElement` copy (cloned node) reference of current element to print.
- __launchPrint__: Function to launch the print dialog after assets (images, fonts, etc) was loaded.
1. Basic example:
```js
```ts
const d = new Printd()
d.print( document.getElementById('h1'), `h1 { font-family: serif; }` )
d.print( document.getElementById('h1'), [`h1 { font-family: serif; }`] )
```

@@ -100,14 +103,22 @@

```js
Callback option is suitable when you plan to print elements or pages with assets (images, fonts, etc) but you need to wait for them. Your callback will be trigered only when your assets are loaded.
```ts
const d = new Printd()
const cssText = `
// text or urls is supported
const styles = [`
.code {
font-family: monospace;
}
`
`]
// text or urls is supported
const scripts = [`
(() => console.log('Hello from IFrame!'))()
`]
// trigger the print dialog on demand when content (E.g. text, images, etc) is ready to print
// trigger the print dialog on demand
const printCallback = ({ launchPrint }) => launchPrint()
d.print(document.getElementById('mycode'), cssText, printCallback)
d.print(document.getElementById('mycode'), styles, scripts, printCallback)
```

@@ -171,3 +182,3 @@

### Webkit-based and old browsers
### beforeprint & afterprint workaround (Webkit-based and old browsers)

@@ -201,2 +212,2 @@ For Webkit-based browsers, it can create an equivalent result using `window.matchMedia('print')`.

© 2017-present [José Quintana](http://git.io/joseluisq)
© 2017-present [José Quintana](https://git.io/joseluisq)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc