Una biblioteca de JavaScript para imprimir cualquier elemento en la página-Print. js

Vista prévia

Descripción

Print. js es una pequeña pero potente biblioteca de JavaScript que le permite previsualizar e imprimir cualquier elemento (PDF, HTML, imagen, DYNAMIC DATA) en la Página Web.

Instalación

# Yarn
$ yarn add print-js

# NPM
$ npm install print-js --save

Funcionamiento

Incluya Print. CSS e Print. js en la Página Web.

<script src="print.js"></script>
<link rel="stylesheet" href="print.css">

Imprima un archivo PDF en la página web sin abrir ni descargar.

printJS('sample.pdf')

Imprima contenido HTML.

printJS('SELECTOR', 'html')

Imprima una imagen en la Página Web.

printJS('img.jpg', 'image');

Imprima datos dinámicos (p. ej., JSON) en la Página Web.

mydata = [


{



 name: 'John Doe',



 email: '[email protected]',



 phone: '111-111-1111'


},


{



 name: 'Barry Allen',



 email: '[email protected]',



 phone: '222-222-2222'


},


{



 name: 'Cool Dude',



 email: '[email protected]',



 phone: '333-333-3333'


}
 ];

 printJS({

 printable: mydata,


properties: ['name', 'email', 'phone'],


type: 'json'
})

Todos los parámetros predeterminados.

// Document source: pdf or image url, html element id or json data object.
printable: null,

fallbackPrintable: null,

// Document type.
type: 'pdf',

// Optional header to be used with HTML, Image or JSON printing.
 // It will be placed on the top of the page.
header: null,

// Max document width in pixels.
 maxWidth: 800,

// Font Family
font: 'TimesNewRoman',

// Font size
font_size: '12pt',

// Used to keep or remove padding and margin from elements that are being printed.
honorMarginPadding: true,

// Print text in color
honorColor: false,

// Used when printing JSON.
properties: null,

// grid header when printing JSON data
gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',

// grid rows when printing JSON data
gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',

// Enable this option to show user feedback when retrieving or processing large PDF files.
showModal: false,

// Message displayed to users when showModal is set to true.
modalMessage: 'Retrieving Document...',

// Frame ID
frameId: 'printJS',

// Document title
documentTitle: 'Document',

// Target styles
targetStyle: ['clear', 'display', 'width', 'min-width', 'height', 'min-height', 'max-height'],
targetStyles: ['border', 'box', 'break', 'text-decoration'],

// Elements to ignore
ignoreElements: [],

// Image style
imageStyle: 'width:100%;',

// Repeat table header
repeatTableHeader: true,

// Pass one or more css files URLs
css: null,

// Pass a string with custom style
style: null,

// When set to false, the library will not process styles applied to the html being printed. Useful when using the css parameter.
scanStyles: true,

// Callback functions
onLoadingStart: null,
onLoadingEnd: null,
onPrintDialogClose: null,

Registro de cambios

09/16/2018

• v1.0.47: Fix bug that stopped images from printing.

08/16/2018

• agregado soporte para la impresión de imágenes en Firefox
• retirado consolelog