Print.js javascript库 实现页面打印

官网地址

您可以从GitHub版本下载最新版本的Print.js

下载v1.0.61

npm 安装

  npm install print-js --save

npm安装时将库导入项目

 import print from 'print-js'

首先，我们需要在页面上包含Print.js库和样式

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

下面主要介绍一下我们要用的打印方法printJS();

printJS()将接受一个对象作为参数，下面表格的参数则为该对象的属性,通过控制属性值来控制打印;

示例

HTML打印

有时我们只想打印HTML页面的选定部分，这可能很棘手。使用Print.js，我们可以轻松传递我们要打印的元素的id。该元素可以是任何标记，只要它具有唯一ID即可。该库将尝试将其打印得非常接近它在屏幕上的外观，同时，它将为它创建一个打印机友好的格式。

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

向表单添加标题

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: '这是标题内容' })">
    打印
 </button>

html时候需要注意的事项:

直接采用默认的参数打印html的时候如果打印内容过多时候可能会非常慢，这时候需要设置scanStyles:false,然后把css抽取出来，这样速度就会非常的快！

printJS({ printable: 'myHtmlElement', type: 'html', scanStyles: false, css: '/my_stylesheet.css' })

图片的打印

通过传递图像网址，Print.js可用于快速打印页面上的任何图像。当您使用低分辨率版本的图像在屏幕上显示多个图像时，此功能非常有用。当用户尝试打印所选图像时，您可以将高分辨率URL传递给Print.js。

<img src="images/print-01.jpg" />
 printJS('图片的url', 'image')

添加标题

printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: '这是标题'})

打印多张图片

 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: '标题仅显示在第一张图片',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

JSON的打印

一种简单快捷的方法来打印动态数据或javascript对象数组。

var  someJSONdata = [
    {
       name: 'John Doe',
       email: 'john@doe.com',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: 'barry@flash.com',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: 'cool@dude.com',
       phone: '333-333-3333'
    }
 ]

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

自定义css来设置数据网格的样式：

 <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;'
    })">
    打印
 </button>

自定义发送对象数组的表头文本

 <button type="button" onclick="printJS({
        printable: someJSONdata,
        properties: [
        { field: 'name', displayName: '自定义表头'},
        { field: 'email', displayName: '自定义表头'},
        { field: 'phone', displayName: '自定义表头'}
        ],
        type: 'json'
        })">
   打印
 </button>

JSON，HTML和图像打印可以接收原始HTML标头

<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>

感谢WwJoyous的分享

浪客行1213的简书

xhh