Vue中使用Printjs插件實現打印功能

Posted on by

前言

客戶需求： 表單支持在線打印
實現思路： 百度…百度…百度之後，printjs 這款插件比較滿足需求，無需下載，無需寫打印模板，並且兼容Element-ui中el-form表單的打印。

一、Print.js介紹

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: '[email protected]',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: '[email protected]',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: '[email protected]',
       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官網。

總結

以上便是printjs插件的使用場景，希望對大傢有所幫助。

到此這篇關於Vue中使用Printjs插件實現打印功能的文章就介紹到這瞭,更多相關Vue Printjs打印插件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：