快捷導(dǎo)航

前端利用PrintJs實(shí)現(xiàn)批量打印文件功能

更新時(shí)間：2025年02月20日 08:54:46 作者：哥要掉線了

在項(xiàng)目中遇到一個(gè)問(wèn)題需要實(shí)現(xiàn)批量打印功能,研究了測(cè)試了一番解決了,把相關(guān)的功能記錄下,這篇文章主要介紹了前端利用PrintJs實(shí)現(xiàn)批量打印文件功能的相關(guān)資料,需要的朋友可以參考下

1.安裝PrintJs

1.使用npm
npm install print-js --save

2.使用yarn
yarn add print-js

2.導(dǎo)入PrintJs

import PrintJs from 'print-js'

3.批量打印實(shí)際代碼

  onPush = () => {
    // 模擬數(shù)據(jù)
    const list = [
      {
        url: 'http://xxx/name1.pdf',
        type: 'pdf'
      },
      {
        url: 'http://xxx/name2.pdf',
        type: 'pdf'
      },
      {
        url: 'http://xxx/name3.png',
        type: 'image'
      },
    ]
    //調(diào)用打印方法
    this.printInvoice(arr)
  }

  printInvoice = (arr) => {
    if(!arr || arr.length === 0){
      return
    }
    let self = this
    let list =  arr
    let printObj = list.shift()
    
    PrintJs({ 
      printable: printObj.url,    // 打印文件url
      type: printObj.type,        // 文件類(lèi)型
      // 關(guān)閉打印窗口回調(diào)
      onPrintDialogClose: (res) => {
        if(list && list.length > 0){
          // 遞歸調(diào)用
          self.printInvoice(list)
        }
      },
      // 失敗回調(diào)
      onError: err => {
        console.log('err',err);
      }
    })
  }

4.附上配置文檔

屬性	默認(rèn)值	描述
printable	null	文檔來(lái)源：pdf 或圖像 url、html 元素 id 或 json 數(shù)據(jù)對(duì)象。
type	'pdf'	可打印類(lèi)型?？捎玫拇蛴∵x項(xiàng)包括：pdf、html、image、json 和 raw-html。
header	null	用于 HTML、圖像或 JSON 打印的可選標(biāo)題。它將放置在頁(yè)面頂部。此屬性將接受文本或原始 HTML。
headerStyle	'font-weight: 300;'	要應(yīng)用于頁(yè)眉文本的可選頁(yè)眉樣式。
maxWidth	800	最大文檔寬度（以像素為單位）。根據(jù)需要更改此設(shè)置。打印 HTML、圖像或 JSON 時(shí)使用。
css	null	這允許我們傳遞一個(gè)或多個(gè) css 文件 URL，這些 URL 應(yīng)該應(yīng)用于正在打印的 html。值可以是具有單個(gè) URL 的字符串，也可以是具有多個(gè) URL 的數(shù)組。
style	null	這允許我們傳遞一個(gè)具有自定義樣式的字符串，該字符串應(yīng)應(yīng)用于正在打印的 html。
scanStyles	true	設(shè)置為 false 時(shí)，庫(kù)將不處理應(yīng)用于正在打印的 html 的樣式。使用參數(shù)時(shí)很有用。
targetStyle	null	默認(rèn)情況下，庫(kù)在打印 HTML 元素時(shí)僅處理某些樣式。此選項(xiàng)允許您傳遞要處理的樣式數(shù)組。例如： ['padding-top'， 'border-bottom']
targetStyles	null	但是，與“targetStyle”相同，這將處理任何一系列樣式。例如：['border'， 'padding']，將包括 'border-bottom'、'border-top'、'border-left'、'border-right'、'padding-top' 等。您還可以傳遞 ['*'] 來(lái)處理所有樣式。
ignoreElements	[]	接受打印父 html 元素時(shí)應(yīng)忽略的 html ID 數(shù)組。
properties	null	打印 JSON 時(shí)使用。這些是對(duì)象屬性名稱(chēng)。
gridHeaderStyle	'font-weight: bold;'	打印 JSON 數(shù)據(jù)時(shí)網(wǎng)格標(biāo)頭的可選樣式。
gridStyle	'border: 1px solid lightgray; margin-bottom: -1px;'	打印 JSON 數(shù)據(jù)時(shí)網(wǎng)格行的可選樣式。
repeatTableHeader	true	打印 JSON 數(shù)據(jù)時(shí)使用。設(shè)置為時(shí)，數(shù)據(jù)表標(biāo)題將僅顯示在第一頁(yè)中。
showModal	null	啟用此選項(xiàng)可在檢索或處理大型 PDF 文件時(shí)顯示用戶反饋。
modalMessage	'Retrieving Document...'	設(shè)置為時(shí)向用戶顯示的消息。
onLoadingStart	null	加載 PDF 時(shí)要執(zhí)行的功能
onLoadingEnd	null	加載 PDF 后要執(zhí)行的功能
documentTitle	'Document'	打印 html、image 或 json 時(shí)，這將顯示為文檔標(biāo)題。
fallbackPrintable	null	打印 pdf 時(shí)，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫(kù)將在新選項(xiàng)卡中打開(kāi) pdf。這允許您傳遞要打開(kāi)的不同 pdf 文檔，而不是在“可打印”中傳遞的原始文檔。如果您在備用 pdf 文件中注入 javascript，這可能很有用。
onPdfOpen	null	打印 pdf 時(shí)，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫(kù)將在新選項(xiàng)卡中打開(kāi) pdf?？梢栽诖颂巶鬟f回調(diào)函數(shù)，當(dāng)發(fā)生這種情況時(shí)將執(zhí)行該函數(shù)。在某些情況下，當(dāng)您想要處理打印流程、更新用戶界面等時(shí)，它可能很有用。
onPrintDialogClose	null	關(guān)閉瀏覽器打印對(duì)話框后執(zhí)行回調(diào)函數(shù)。
onError	error => throw error	發(fā)生錯(cuò)誤時(shí)要執(zhí)行的回調(diào)函數(shù)
base64	false	打印作為 base64 數(shù)據(jù)傳遞的 PDF 文檔時(shí)使用。