Print.js javascript庫 實現(xiàn)頁面打印

官網(wǎng)地址

您可以從GitHub版本下載最新版本的Print.js

下載v1.0.61

npm 安裝

  npm install print-js --save

npm安裝時將庫導(dǎo)入項目

 import print from 'print-js'

首先，我們需要在頁面上包含Print.js庫和樣式

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

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

printJS()將接受一個對象作為參數(shù)，下面表格的參數(shù)則為該對象的屬性,通過控制屬性值來控制打印;

示例

HTML打印

有時我們只想打印HTML頁面的選定部分刽脖，這可能很棘手。使用Print.js忌愚，我們可以輕松傳遞我們要打印的元素的id曲管。該元素可以是任何標(biāo)記，只要它具有唯一ID即可硕糊。該庫將嘗試將其打印得非常接近它在屏幕上的外觀院水，同時，它將為它創(chuàng)建一個打印機友好的格式简十。

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

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

向表單添加標(biāo)題

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: '這是標(biāo)題內(nèi)容' })">
    打印
 </button>

html時候需要注意的事項:

直接采用默認(rèn)的參數(shù)打印html的時候如果打印內(nèi)容過多時候可能會非常慢檬某，這時候需要設(shè)置scanStyles:false,然后把css抽取出來，這樣速度就會非常的快螟蝙！

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

圖片的打印

通過傳遞圖像網(wǎng)址恢恼，Print.js可用于快速打印頁面上的任何圖像。當(dāng)您使用低分辨率版本的圖像在屏幕上顯示多個圖像時胰默，此功能非常有用场斑。當(dāng)用戶嘗試打印所選圖像時，您可以將高分辨率URL傳遞給Print.js牵署。

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

添加標(biāo)題

printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: '這是標(biāo)題'})

打印多張圖片

 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: '標(biāo)題僅顯示在第一張圖片',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

JSON的打印

一種簡單快捷的方法來打印動態(tài)數(shù)據(jù)或javascript對象數(shù)組漏隐。

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來設(shè)置數(shù)據(jù)網(wǎng)格的樣式：

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

自定義發(fā)送對象數(shù)組的表頭文本

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

JSON，HTML和圖像打印可以接收原始HTML標(biāo)頭

<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