快捷導(dǎo)航

vue+element-ui前端使用print-js實現(xiàn)打印功能(可自定義樣式)

更新時間：2022年11月26日 15:52:52 作者：廢八

Print.js主要是為了幫助我們直接在瀏覽器中開發(fā)打印功能,下面這篇文章主要給大家介紹了關(guān)于vue+element-ui前端使用print-js實現(xiàn)打印功能(可自定義樣式)的相關(guān)資料,需要的朋友可以參考下

下載依賴

npm install print-js --save

在package.json文件中增加print-js依賴。

  "dependencies": {
    "axios": "^0.19.2",
    "babel-polyfill": "^6.26.0",
    "element-ui": "^2.15.6",
    "file-saver": "^2.0.5",
    "pinyin-match": "^1.2.2",
    "print-js": "^1.6.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.2",
    "xlsx": "^0.17.0",
    "xlsx-style": "^0.8.13"
  },

使用print-js

在需要打印的頁面對應(yīng)文件中引入print-js

  import printJS from 'print-js'

實現(xiàn)打印功能

需要打印的內(nèi)容

需要把表格打印出來，在表格外套一個div，并給一個id值。

      <div class="data-card" id="mytable1">
        <el-table size="mini" :key="num" id="mytable"
                  :header-cell-style="tableHeaderColor"
                  :span-method="arraySpanMethod"
                  :cell-style="cellStyle"
                  ref="table"
                  :data="tableDataDetail"
                  border
                  stripe
                  style="width: 100%">
          <el-table-column
            align="center"
            :label="title">
          </el-table-column>
        </el-table>
      </div>

按鈕調(diào)用打印函數(shù)

定義一個按鈕，點擊調(diào)用打印函數(shù)。

          <el-button @click="handleDownload()">下載</el-button>

打印函數(shù)

不同瀏覽器打印樣式不同，使用navigator.userAgent進(jìn)行了判斷。

printJS是引用的print-js對象

printtable為標(biāo)簽元素id

type有html，json，pdf等。

header是用于HTML、圖像或JSON打印的可選標(biāo)題。它將被放置在頁面的頂部。此屬性將接受文本或原始HTML。

style為自定義的樣式

      handlePrint () {
        let userAgent = navigator.userAgent;
        //判斷是否Firefox瀏覽器
        if (userAgent.indexOf("Firefox") > -1) {
          console.log('Firefox')
          printJS({
            printable: 'mytable1', // 標(biāo)簽元素id
            type: 'html',
            header: '',
            style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
          });
        }
        //判斷是否chorme瀏覽器
        if (userAgent.indexOf("Chrome") > -1){
          console.log('Chrome')
          printJS({
            printable: 'mytable1', // 標(biāo)簽元素id
            type: 'html',
            header: '',
            documentTitle: '',
            style: `@page {size:auto;margin-top:100px; margin-left:5px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
          });
        }
        //判斷是否IE瀏覽器
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
          console.log('IE')
          printJS({
            printable: 'mytable1', // 標(biāo)簽元素id
            type: 'html',
            header: '',
            style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
          });
        }
      },

調(diào)整打印字體大小

修改print-js文件

修改font_size數(shù)值（小于一定數(shù)值之后chrome瀏覽器內(nèi)打印字體不會變?。?/p>

參數(shù)

參數(shù)	默認(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)用于標(biāo)題文本的可選標(biāo)題樣式。
maxWidth	800	以像素為單位的最大文檔寬度。根據(jù)需要更改此選項。打印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的樣式。使用css參數(shù)時很有用。
targetStyle	null	默認(rèn)情況下，在打印HTML元素時，庫僅處理某些樣式。此選項允許您傳遞要處理的樣式數(shù)組。例如：[‘pading-top’，‘border-bottom’]
targetStyles	null	不過，與“targetStyle”相同，它將處理任意范圍的樣式。例如：[‘border’，‘padding’]，將包括“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您還可以傳遞[‘*’]來處理所有樣式。
ignoreElements	[ ]	接受打印父html元素時應(yīng)忽略的html ID數(shù)組。
properties	null	打印JSON時使用。這些是對象屬性名稱。
gridHeaderStyle	‘font-weight: bold;’	打印JSON數(shù)據(jù)時網(wǎng)格頭的可選樣式。
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	打印JSON數(shù)據(jù)時網(wǎng)格行的可選樣式。
repeatTableHeader	true	打印JSON數(shù)據(jù)時使用。設(shè)置為false時，數(shù)據(jù)表標(biāo)題將僅顯示在第一頁。
showModal	null	啟用此選項可在檢索或處理大型PDF文件時顯示用戶反饋。
modalMessage	‘Retrieving Document…’	showModal設(shè)置為true時向用戶顯示的消息。
onLoadingStart	null	加載PDF時要執(zhí)行的函數(shù)
onLoadingEnd	null	加載PDF后要執(zhí)行的函數(shù)
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í)行回調(diào)函數(shù)。在某些需要處理打印流、更新用戶界面等的情況下，它可能很有用。
onPrintDialogClose	null	瀏覽器打印對話框關(guān)閉后執(zhí)行的回調(diào)函數(shù)。
onError	error => throw error	發(fā)生錯誤時要執(zhí)行的回調(diào)函數(shù)。
base64	false	打印作為base64數(shù)據(jù)傳遞的PDF文檔時使用。
honorMarginPadding(棄用)	true	這用于保留或刪除正在打印的元素的填充和邊距。有時這些樣式設(shè)置在屏幕上很好，但在打印時看起來很糟糕。您可以通過將其設(shè)置為false來刪除它。
honorColor(棄用)	false	要彩色打印文本，請將此屬性設(shè)置為true。默認(rèn)情況下，所有文本將以黑色打印。
font(棄用)	‘TimesNewRoman’	打印HTML或JSON時使用的字體。
font_size(棄用)	‘12pt’	打印HTML或JSON時使用的字體大小。
imageStyle(棄用)	‘width:100%;’	打印圖像時使用。接受包含要應(yīng)用于每個圖像的自定義樣式的字符串。

總結(jié)

到此這篇關(guān)于vue+element-ui前端使用print-js實現(xiàn)打印功能(可自定義樣式)的文章就介紹到這了,更多相關(guān)vue+element-ui使用print-js打印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: