Imprimir HTML/JSON/PDF/imagen desde la web-Print. js

Vista prévia

Descripción

Print. js es una pequeña pero potente y personalizable biblioteca de impresión JavaScript que le permite imprimir HTML, JSON, PDF e imagen directamente desde la Web.

Funcionamiento

Instalar & descargar.

# Yarn
$ yarn add print-js

# NPM
$ npm install print-js --save

Importe el paquete.

import print from 'print-js'

O importar directamente la versión minimizada de Print. js en la página.

<script src='src/js/print.min.js'></script>

Imprima un archivo PDF que especifique.

printJS('test.pdf');

Imprima cualquier contenido HTML que especifique.

<div id="example">

<h1>Hello World</h1>
</div>

printJS(example, 'html');

Imprima datos JSON.

let data = [


{




test1: 'Test1 string',




test2: {






a: 'Test2 object, a property',




}


},


{




test1: 'more Test1 string',




test2: {






a: 'more Test2 object, a property',




}


}
]

printJS({printable: data, properties: ['test1', 'test2.a'], type: 'json'})

Imprima las imágenes que especifique.

printJS('images.jpg', 'image')

 // or

printJS({

printable: ['1.jpg', '2.jpg', '3.jpg'],

type: 'image'
})

Available settings to customize the print library.

printJS({


// element to print

printable: null,


// fallback for PDF print

fallbackPrintable: null,


// 'pdf', 'html', 'image', 'json'

type: 'pdf',


// custom print header

header: null,


// header style

headerStyle: 'font-weight: 300;',


// max width in px

maxWidth: 800,


// font family

font: 'TimesNewRoman',


// font size

font_size: '12pt',


// keep or remove padding and margin from elements

 honorMarginPadding: true,


// print text in color

honorColor: false,


// properties for json print

properties: null,

gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',

gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',


// show a modal

 showModal: false,


// modal message

modalMessage: 'Retrieving Document...',


// frame ID

frameId: 'printJS',


// document title

documentTitle: 'Document',


// an array of styles

 targetStyle: null,

targetStyles: null,


// elements to ignore

ignoreElements: [],


// image style

imageStyle: 'width:100%;',


// repeat table header

repeatTableHeader: true,


// callback functions

onLoadingStart: null,

onLoadingEnd: null,


})