Print.js realizes printing pdf, HTML, pictures (styles can be set and paged)

1. Install and import Print.js

1. Install

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

2. Introduce in the files that need to be used

import printJS from 'print-js'

2. Introduction

Print.js has four printing types: 'pdf', 'html', 'image', 'json'.

Its basic usage is to call printJS() and pass in parameters

//pdf打印 传入PDF文档url
printJS('docs/PrintJS.pdf')

//图片打印 传入图片url，第二个参数:'image'
printJS('images/PrintJS.jpg', 'image')

//html打印 第一个参数:元素id，第二个参数:'html'
printJS('myElementId', 'html')

//json打印 当打印Json数据时，传入要打印的数据、类型和数据属性
printJS({printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3']})

3. Common configuration

Print.js accepts an object as a parameter, here you can configure some options:

field	Defaults	illustrate
printable	null	Data source: url of pdf or image, fill in the print area element id for html type, and data object for json type.
type	'pdf'	Optional types: pdf, html, image, json.
header	null	Applied to the header text at the top of the page.
headerStyle	'font-weight: 300;'	An optional heading style to apply to the heading text.
maxWidth	800	Maximum document width in pixels.
css	null	This allows us to pass one or more urls of css files that should be applied to the html being printed. Value can be a string containing a single URL, or an array containing multiple URLs.
style	null	This allows us to pass a string of custom styles that should be applied to the html being printed.

Four. Specific use

1. Print Html

<div id="printJS-HTML" style="display:none;">
    <div v-for="index in 5" :key="index">
      <table>
        <tr>
          <td>序号</td>
          <td>作者</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Ghmin</td>
        </tr>
      </table>
       <!--  控制打印分页的关键 -->
      <div class="paging"></div>
    </div>
</div>
<button @click="printHtml">打印 HTML</button>

const printHtml=()=>{
      //在页面显示需打印区域来获取dom
      document.querySelector('#printJS-HTML').style.display = 'block'
      printJS({
        printable: 'printJS-HTML',//打印区域id
        type: 'html',//打印类型
        style: `@page { size: auto; } .paging{page-break-after: always;}`,
      })
      //获取打印内容后隐藏dom
      document.querySelector('#printJS-HTML').style.display = 'none'
}

Here the .paging{page-break-after: always;} style is the key to controlling pagination.

2. Print pictures

For printing pictures, you can use the first Html method above, but it is more recommended to use the "image" printing type provided by Print.js

  printJS({
    printable: ['第一张图片Url','第二张图片Url','第三张图片Url'],
    type: 'image',
    header: null,
    imageStyle: `display: block;margin: 0 auto;page-break-after: always;max-width:100%`
  })

Compared with the Html method, this is simpler, just pass in the image url array to be printed.

For more information, please visit Print.js official website: https://printjs.crabbly.com/