快捷導(dǎo)航

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

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

在項目中遇到一個問題需要實現(xiàn)批量打印功能,研究了測試了一番解決了,把相關(guān)的功能記錄下,這篇文章主要介紹了前端利用PrintJs實現(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.批量打印實際代碼

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