Print. JS -- web page file printing

Print.js
There are four types of printed documents available :’ pdf ‘,’ html ',' Images ’ and json.

The default type is ’ pdf '.
Its basic usage is to call printJS() Just enter one PDF Document URL :printJS('docs/PrintJS.pdf ').
For image files , The idea is the same , But you need to pass the second parameter :printJS('images/PrintJS.jpg ‘,’ image ‘).
To print HTML Elements , In a similar way , Incoming elements id And type :printJS(’ myelementtid ‘,’ html ‘).
Print JSON Data time , Pass in the data to be printed 、 Type and data attributes : printJS({ Printable :myData, type :’ json ', attribute :[‘prop1
‘,’ prop2 ‘,’ prop3’]});

Download and install

npm/yarn install

npm install print-js --save
yarn add print-js

Introduce in the project

import print from ‘print-js’

use cdn It can also be introduced directly

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

Getting started

Introduce <script src="print.js"></script>
If you use modal Need to introduce css file <link rel="stylesheet" type="text/css" href="print.css">

Document printing

Add a button to print PDF file :

 <button type="button" onclick="printJS('docs/printjs.pdf')">
    Print PDF
 </button>

For large documents , You can display a message to the user when the file is loaded

<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message
 </button>

Support base64 PDF Print :

 <button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
 </button>

HTML Print

Sometimes we just want to print HTML Selected parts of the page , It can be tricky . Use Print.js, We can easily pass the elements we want to print id. The element can be any label , As long as it has a unique id. The library will try to print it very close to what it looks like on the screen , meanwhile , It will create a printer friendly format for it .

Form printing

Printing with parameters , Such as the title

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
    Print Form with Header
 </button>

Image printing

Picture printing

 printJS('images/print-01-highres.jpg', 'image')

add headers

 printJS({
    printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

Print multiple pictures

 printJS({
    
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: 'Multiple Images',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

JSON Print

 someJSONdata = [
    {
    
       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'
    }
 ]

basic

 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
    Print JSON Data
 </button>

Custom style

 <button type="button" onclick="printJS({
    
	    printable: someJSONdata,
	    properties: ['name', 'email', 'phone'],
	    type: 'json',
	    gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',
	    gridStyle: 'border: 2px solid #3971A5;'
	})">
    Print JSON Data
 </button>

Custom table title name

 <button type="button" onclick="printJS({
    
	    printable: someJSONdata,
	    properties: [
		{
     field: 'name', displayName: 'Full Name'},
		{
     field: 'email', displayName: 'E-mail'},
		{
     field: 'phone', displayName: 'Phone'}
	    ],
	    type: 'json'
        })">
    Print with custom table header text
 </button>

Add table title text

<button type="button" onclick="printJS({
    
		printable: someJSONdata,
		type: 'json',
		properties: ['name', 'email', 'phone'],
		header: '<h3 class="custom-h3">My custom header</h3>',
		style: '.custom-h3 { color: red; }'
	  })">
	Print header raw html
</button>