Vue中使用Printjs外掛實現列印功能

2022-08-08 18:00:37

前言

客戶需求： 表單支援線上列印
實現思路： 百度…百度…百度之後，printjs 這款外掛比較滿足需求，無需下載，無需寫列印模板，並且相容Element-ui中el-form表單的列印。

一、Print.js介紹

Print.js 主要是為了幫助我們直接在我們的應用程式中列印 PDF 檔案，無需離開介面，也無需使用嵌入。對於使用者無需開啟或下載 PDF 檔案而只需列印它們的特殊情況。
支援“pdf”、“html”、“image”和“json”四種列印檔案型別。預設為“pdf”。

PrintJS引數設定表

引數	預設值	描述
printable	null	檔案來源：pdf 或圖片 url、html 元素 id 或 json 資料物件。
type	‘pdf’	可列印型別。可用的列印選項有：pdf、html、image、json 和 raw-html。
header	null	用於與 HTML、影象或 JSON 列印的可選標題。它將被放置在頁面頂部。此屬性將接受文字或原始 HTML。
headerStyle	‘font-weight: 300;’	要應用於標題文字的可選標題樣式。
maxWidth	800	最大檔案寬度（以畫素為單位）。根據需要更改此設定。在列印 HTML、影象或 JSON 時使用。
css	null	應用於正在列印的 html 的 css 檔案 URL。值可以是具有單個 URL 的字串或具有多個 URL 的陣列。
style	null	自定義樣式的字串。應用於正在列印的 html。
scanStyles	true	設定為 false 時，庫將不會處理應用於正在列印的 html 的樣式。在使用 css 引數時很有用。
targetStyle	null	預設情況下，庫僅在列印 HTML 元素時處理某些樣式。此選項允許您傳遞要處理的樣式陣列。例如：[‘padding-top’, ‘border-bottom’]
targetStyles	null	與 targetStyle 相同，但是，這將處理任意範圍的樣式。例如：[‘border’, ‘padding’]，將包括’border-bottom’、‘border-top’、‘border-left’、‘border-right’、‘padding-top’等。也可以通過 [’*'] 來處理所有樣式。
ignoreElements	[ ]	傳入列印父 html 元素時應忽略的 html id 陣列。使其不列印。
properties	null	列印 JSON 時使用。這些是物件屬性名稱。
gridHeaderStyle	‘font-weight: bold;’	列印 JSON 資料時網格標題的可選樣式。
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	列印 JSON 資料時網格行的可選樣式。
repeatTableHeader	TRUE	列印 JSON 資料時使用。設定為 false 時，資料表標題將僅顯示在第一頁。
showModal	null	啟用此選項可在檢索或處理大型 PDF 檔案時顯示使用者反饋。
modalMessage	Retrieving Document…’	當 showModal 設定為 true 時向用戶顯示的訊息。
onLoadingStart	null	載入 PDF 時要執行的功能
onLoadingEnd	null	載入 PDF 後要執行的功能
documentTitle	Document’	列印 html、影象或 json 時，這將顯示為檔案標題。
fallbackPrintable	null	列印 pdf 時，如果瀏覽器不相容（檢查瀏覽器相容性表），庫將在新索引標籤中開啟 pdf。這允許您傳遞要開啟的不同pdf檔案，而不是在printable中傳遞的原始檔案。如果您在備用pdf檔案中注入javascript，這可能很有用。
onPdfOpen	null	列印 pdf 時，如果瀏覽器不相容（檢查瀏覽器相容性表），庫將在新索引標籤中開啟 pdf。可以在此處傳遞迴撥函數，該函數將在發生這種情況時執行。在某些情況下，如果要處理列印流、更新使用者介面等，它可能很有用。
onPrintDialogClose	null	在瀏覽器列印對話方塊關閉後執行的回撥函數。
onError	error => throw error	發生錯誤時要執行的回撥函數。
base64	false	在列印作為 base64 資料傳遞的 PDF 檔案時使用。
honorMarginPadding (已棄用)	true	這用於保留或刪除正在列印的元素中的填充和邊距。有時這些樣式設定在螢幕上很棒，但在列印時看起來很糟糕。您可以通過將其設定為 false 來將其刪除。
honorColor (已棄用)	false	若要以彩色列印文字，請將此屬性設定為 true。預設情況下，所有文字都將以黑色列印。
font(已棄用)	TimesNewRoman’	列印 HTML 或 JSON 時使用的字型。
font_size (已棄用)	12pt’	列印 HTML 或 JSON 時使用的字型大小。
imageStyle(已棄用)	width:100%;’	列印影象時使用。接受具有要應用於每個影象的自定義樣式的字串。

二、安裝/引入

方法1.下載print.js

從官網下載print.js，將下載的 print.js 放入專案utils資料夾
可以全域性引入即（在main.js中引入），也可以在需要的檔案裡面引入import Print from './utils/print'

方法2.使用npm安裝print外掛

安裝print-jsnpm install print-js --save
可以全域性引入即（在main.js中引入），也可以在需要的檔案裡面引入 import Print from 'print-js'

三、使用-“html”型別

在表單頁面中呼叫列印方法

<template>
  <div class="app-container">
    <div id="printFrom">
      <el-form :ref="formRef" :model="form" :rules="validateRules">
      ...
      </el-form>
      <el-button type="info" @click="handlePrint(printData)">列印</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      formRef: 'form',
      validateRules: [],
      printData: {
        printable: 'printFrom',
        header: '申請表',
        ignore: ['no-print']
      }
    }
  },
   handlePrint(params) {
     printJS({
       printable: params.printable, // 'printFrom', // 標籤元素id
       type: params.type || 'html',
       header: params.header, // '表單',
       targetStyles: ['*'],
       style: '@page {margin:0 10mm};', // 可選-列印時去掉眉頁首尾
       ignoreElements: params.ignore || [], // ['no-print']
       properties: params.properties || null
     })
   }
 }
}
</script>

點選列印按鈕，彈出預覽列印介面，右邊欄調整列印介面。
假設出現列印不全的問題，可以通過縮放來進行設定，數值越小，縮放的越小。

四、其他Type範例

1.pdf

printJS('docs/printjs.pdf')
// 或
printJS({printable:'docs/printjs.pdf', type:'pdf', showModal:true})

2.image單個影象

printJS('images/print-01-highres.jpg', 'image')
// 或
printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

3.image多個影象

printJS({
printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
type: 'image',
header: 'Multiple Images',
imageStyle: 'width:50%;margin-bottom:20px;'
})

4.json

 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'
    }
 ]
 
printJS({
    printable: someJSONdata,
    properties: ['name', 'email', 'phone'],
    type: 'json',
    gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',
    gridStyle: 'border: 2px solid #3971A5;'
})

更多範例請參考Print.js官網。