快捷導(dǎo)航

利用Print.js實現(xiàn)打印pdf、HTML及圖片(可設(shè)置樣式可分頁)

更新時間：2024年05月07日 08:47:25 作者：琢鳴

在我們需要在頁面中打印某個區(qū)域的內(nèi)容或者生成pdf的時候,我們可以直接用printJs庫,這篇文章主要給大家介紹了關(guān)于利用Print.js實現(xiàn)打印pdf、HTML及圖片的相關(guān)資料,可設(shè)置樣式可分頁,需要的朋友可以參考下

一.安裝及引入Print.js

1.安裝

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

2.在需要使用的文件引入

import printJS from 'print-js'

二.介紹

Print.js有四種打印類型：'pdf'、'html'、'image'、'json'。

它的基本用法是調(diào)用printJS()并傳入?yún)?shù)

//pdf打印 傳入PDF文檔url
printJS('docs/PrintJS.pdf')

//圖片打印 傳入圖片url，第二個參數(shù):'image'
printJS('images/PrintJS.jpg', 'image')

//html打印 第一個參數(shù):元素id，第二個參數(shù):'html'
printJS('myElementId', 'html')

//json打印 當(dāng)打印Json數(shù)據(jù)時，傳入要打印的數(shù)據(jù)、類型和數(shù)據(jù)屬性
printJS({printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3']})

三.常用配置

Print.js接受一個對象作為參數(shù)，在這里你可以配置一些選項:

字段	默認(rèn)值	說明
printable	null	數(shù)據(jù)源:pdf or image的url，html類型則填打印區(qū)域元素id，json類型則是數(shù)據(jù)object。
type	'pdf'	可選類型:pdf, html, image, json。
header	null	應(yīng)用于頁面頂部標(biāo)題文本。
headerStyle	'font-weight: 300;'	應(yīng)用于標(biāo)題文本的可選標(biāo)題樣式。
maxWidth	800	最大文檔寬度(像素)。
css	null	這允許我們傳遞一個或多個css文件的url，應(yīng)該應(yīng)用到正在打印的html。Value可以是包含單個URL的字符串，也可以是包含多個URL的數(shù)組。
style	null	這允許我們傳遞一個自定義樣式的字符串，該字符串應(yīng)應(yīng)用于正在打印的html。

四.具體使用

1.打印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>
       <!--  控制打印分頁的關(guān)鍵 -->
      <div class="paging"></div>
    </div>
</div>
<button @click="printHtml">打印 HTML</button>

const printHtml=()=>{
      //在頁面顯示需打印區(qū)域來獲取dom
      document.querySelector('#printJS-HTML').style.display = 'block'
      printJS({
        printable: 'printJS-HTML',//打印區(qū)域id
        type: 'html',//打印類型
        style: `@page { size: auto; } .paging{page-break-after: always;}`,
      })
      //獲取打印內(nèi)容后隱藏dom
      document.querySelector('#printJS-HTML').style.display = 'none'
}

這里 .paging{page-break-after: always;}樣式就是控制分頁的關(guān)鍵。

2.打印圖片

打印圖片的話可以使用上面第一種Html的方式，但更推薦使用Print.js提供的"image"打印類型

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

相對于Html方式這個更簡單，傳入需要打印的圖片url數(shù)組即可。

更多內(nèi)容可訪問 Print.js官網(wǎng)：https://printjs.crabbly.com/