快捷導(dǎo)航

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

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

Print.js主要是為了幫助我們直接在瀏覽器中開(kāi)發(fā)打印功能,下面這篇文章主要給大家介紹了關(guān)于vue+element-ui前端使用print-js實(shí)現(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è)面對(duì)應(yīng)文件中引入print-js

  import printJS from 'print-js'

實(shí)現(xiàn)打印功能

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

需要把表格打印出來(lái)，在表格外套一個(gè)div，并給一個(gè)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ù)

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

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

打印函數(shù)

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

printJS是引用的print-js對(duì)象

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

type有html，json，pdf等。

header是用于HTML、圖像或JSON打印的可選標(biāo)題。它將被放置在頁(yè)面的頂部。此屬性將接受文本或原始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)打印字體不會(huì)變?。?/p>

參數(shù)

參數(shù)	默認(rèn)值	說(shuō)明
printable	null	文檔源：pdf或圖像url、html元素id或json數(shù)據(jù)對(duì)象。
type	‘pdf’	可打印類型?？捎玫拇蛴∵x項(xiàng)有：pdf、html、image、json和raw html。
header	null	用于HTML、圖像或JSON打印的可選標(biāo)題。它將被放置在頁(yè)面頂部。此屬性將接受文本或原始HTML。
headerStyle	‘font-weight: 300;’	要應(yīng)用于標(biāo)題文本的可選標(biāo)題樣式。
maxWidth	800	以像素為單位的最大文檔寬度。根據(jù)需要更改此選項(xiàng)。打印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ù)將不會(huì)處理應(yīng)用于正在打印的html的樣式。使用css參數(shù)時(shí)很有用。
targetStyle	null	默認(rèn)情況下，在打印HTML元素時(shí)，庫(kù)僅處理某些樣式。此選項(xiàng)允許您傳遞要處理的樣式數(shù)組。例如：[‘pading-top’，‘border-bottom’]
targetStyles	null	不過(guò)，與“targetStyle”相同，它將處理任意范圍的樣式。例如：[‘border’，‘padding’]，將包括“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您還可以傳遞[‘*’]來(lái)處理所有樣式。
ignoreElements	[ ]	接受打印父html元素時(shí)應(yīng)忽略的html ID數(shù)組。
properties	null	打印JSON時(shí)使用。這些是對(duì)象屬性名稱。
gridHeaderStyle	‘font-weight: bold;’	打印JSON數(shù)據(jù)時(shí)網(wǎng)格頭的可選樣式。
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	打印JSON數(shù)據(jù)時(shí)網(wǎng)格行的可選樣式。
repeatTableHeader	true	打印JSON數(shù)據(jù)時(shí)使用。設(shè)置為false時(shí)，數(shù)據(jù)表標(biāo)題將僅顯示在第一頁(yè)。
showModal	null	啟用此選項(xiàng)可在檢索或處理大型PDF文件時(shí)顯示用戶反饋。
modalMessage	‘Retrieving Document…’	showModal設(shè)置為true時(shí)向用戶顯示的消息。
onLoadingStart	null	加載PDF時(shí)要執(zhí)行的函數(shù)
onLoadingEnd	null	加載PDF后要執(zhí)行的函數(shù)
documentTitle	‘Document’	打印html、image或json時(shí)，這將顯示為文檔標(biāo)題。
fallbackPrintable	null	打印pdf時(shí)，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫(kù)將在新選項(xiàng)卡中打開(kāi)pdf。這允許您傳遞要打開(kāi)的不同pdf文檔，而不是傳遞給“可打印”的原始文檔。如果在備用pdf文件中注入javascript，這可能會(huì)很有用。
onPdfOpen	null	打印pdf時(shí)，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫(kù)將在新選項(xiàng)卡中打開(kāi)pdf?？梢栽诖颂巶鬟f回調(diào)函數(shù)，當(dāng)發(fā)生這種情況時(shí)將執(zhí)行回調(diào)函數(shù)。在某些需要處理打印流、更新用戶界面等的情況下，它可能很有用。
onPrintDialogClose	null	瀏覽器打印對(duì)話框關(guān)閉后執(zhí)行的回調(diào)函數(shù)。
onError	error => throw error	發(fā)生錯(cuò)誤時(shí)要執(zhí)行的回調(diào)函數(shù)。
base64	false	打印作為base64數(shù)據(jù)傳遞的PDF文檔時(shí)使用。
honorMarginPadding(棄用)	true	這用于保留或刪除正在打印的元素的填充和邊距。有時(shí)這些樣式設(shè)置在屏幕上很好，但在打印時(shí)看起來(lái)很糟糕。您可以通過(guò)將其設(shè)置為false來(lái)刪除它。
honorColor(棄用)	false	要彩色打印文本，請(qǐng)將此屬性設(shè)置為true。默認(rèn)情況下，所有文本將以黑色打印。
font(棄用)	‘TimesNewRoman’	打印HTML或JSON時(shí)使用的字體。
font_size(棄用)	‘12pt’	打印HTML或JSON時(shí)使用的字體大小。
imageStyle(棄用)	‘width:100%;’	打印圖像時(shí)使用。接受包含要應(yīng)用于每個(gè)圖像的自定義樣式的字符串。

總結(jié)

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

您可能感興趣的文章: