前端printjs的使用實(shí)戰(zhàn)案例

更新時(shí)間：2024年06月22日 09:51:32 作者：空白

Print.js是一個(gè)小的javascript庫,可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于前端printjs的使用實(shí)戰(zhàn)案例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、下載

1.使用 npm 進(jìn)行安裝

 npm install print-js --save

2.使用 yarn 安裝

yarn add print-js

3.導(dǎo)入

import print from 'print-js'

二、案例

1、打印HTML

<button @click="printer">打印</button>

<div id="printContent">
    <!-- 需要打印的內(nèi)容 -->
    123
</div>

<script>
import printJS from 'print-js';

const printer = () =>{
    printJS({
        printable: '#printContent',
        type: 'html',
    });
}
</script>

2.打印Json

<button @click="printer">打印</button>

<script>
import printJS from 'print-js';

const printer = () =>{
    printJS({
        printable:[
            { date:"2008-08-08", name:"賽麗亞", intensify:"429" },
            { date:"2012-12-12", name:"派蒙", intensify:"648" },
        ], 
        properties: [ //表頭
            {field: 'date', displayName: '日期', },
            {field: 'name', displayName: '姓名', },
            {field: 'intensify', displayName: '變強(qiáng)', },
        ], 
        type: 'json',
        header:"人員名單",
        headerStyle:"text-align: center;font-weight: bold;",
        documentTitle:"",
        gridHeaderStyle: 'border: 1px solid #000;text-align:center',
        gridStyle: 'border: 1px solid #000;text-align:center',
        repeatTableHeader:true
    })
}
</script>

3.打印圖片

<button @click="printer">打印</button>

<script>
import printJS from 'print-js';

const printer = () =>{
    printJS({
        printable: [
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'    
        ],
        type: 'image',
        header: 'Multiple Images',
        imageStyle: 'width:50%;margin-bottom:20px;'
    })
}
</script>

三、配置項(xiàng)

屬性	默認(rèn)值	描述
printable	null	文檔來源：pdf 或圖像 url、html 元素 id 或 json 數(shù)據(jù)對象。
type	'pdf'	可打印類型?？捎玫拇蛴∵x項(xiàng)包括：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 時(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í)，庫將不處理應(yīng)用于正在打印的 html 的樣式。使用參數(shù)時(shí)很有用。
targetStyle	null	默認(rèn)情況下，庫在打印 HTML 元素時(shí)僅處理某些樣式。此選項(xiàng)允許您傳遞要處理的樣式數(shù)組。例如： ['padding-top'， 'border-bottom']
targetStyles	null	但是，與“targetStyle”相同，這將處理任何一系列樣式。例如：['border'， 'padding']，將包括 'border-bottom'、'border-top'、'border-left'、'border-right'、'padding-top' 等。您還可以傳遞 ['*'] 來處理所有樣式。
ignoreElements	[]	接受打印父 html 元素時(shí)應(yīng)忽略的 html ID 數(shù)組。
properties	null	打印 JSON 時(shí)使用。這些是對象屬性名稱。
gridHeaderStyle	'font-weight: bold;'	打印 JSON 數(shù)據(jù)時(shí)網(wǎng)格標(biāo)頭的可選樣式。
gridStyle	'border: 1px solid lightgray; margin-bottom: -1px;'	打印 JSON 數(shù)據(jù)時(shí)網(wǎng)格行的可選樣式。
repeatTableHeader	true	打印 JSON 數(shù)據(jù)時(shí)使用。設(shè)置為時(shí)，數(shù)據(jù)表標(biāo)題將僅顯示在第一頁中。
showModal	null	啟用此選項(xiàng)可在檢索或處理大型 PDF 文件時(shí)顯示用戶反饋。
modalMessage	'Retrieving Document...'	設(shè)置為時(shí)向用戶顯示的消息。
onLoadingStart	null	加載 PDF 時(shí)要執(zhí)行的功能
onLoadingEnd	null	加載 PDF 后要執(zhí)行的功能
documentTitle	'Document'	打印 html、image 或 json 時(shí)，這將顯示為文檔標(biāo)題。
fallbackPrintable	null	打印 pdf 時(shí)，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫將在新選項(xiàng)卡中打開 pdf。這允許您傳遞要打開的不同 pdf 文檔，而不是在“可打印”中傳遞的原始文檔。如果您在備用 pdf 文件中注入 javascript，這可能很有用。
onPdfOpen	null	打印 pdf 時(shí)，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫將在新選項(xiàng)卡中打開 pdf?？梢栽诖颂巶鬟f回調(diào)函數(shù)，當(dāng)發(fā)生這種情況時(shí)將執(zhí)行該函數(shù)。在某些情況下，當(dāng)您想要處理打印流程、更新用戶界面等時(shí)，它可能很有用。
onPrintDialogClose	null	關(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í)看起來很糟糕。您可以通過將其設(shè)置為 false 來刪除它。
honorColor （已棄用）	false	若要打印彩色文本，請將此屬性設(shè)置為 true。默認(rèn)情況下，所有文本都將以黑色打印。
font （已棄用）	'TimesNewRoman'	打印 HTML 或 JSON 時(shí)使用的字體。
font_size （已棄用）	'12pt'	打印 HTML 或 JSON 時(shí)使用的字體大小。
imageStyle （已棄用）	'width:100%;'	打印圖像時(shí)使用。接受要應(yīng)用于每個(gè)圖像的具有自定義樣式的字符串。

附：使用print-js開發(fā)打印功能，解決不同分辨率設(shè)備打印時(shí)適配的問題

近期開發(fā)了一張報(bào)表，功能有打印，是好開發(fā)的；可是不同設(shè)備分辨率打印時(shí)并不適配。

網(wǎng)上查找搜尋未果，經(jīng)過經(jīng)理的提點(diǎn)和自己的探索和嘗試，最終解決了這一令人頭疼的問題。

特此記錄，并把這個(gè)方法和思維分享給遇到這個(gè)問題查找無果的愛學(xué)習(xí)愛鼓搗辛勤工作的讀者們。

問題描述：

筆者在開發(fā)時(shí)按照本PC機(jī)的分辨率進(jìn)行打印調(diào)整；所以在當(dāng)前電腦上打印是沒有任何問題的。

只是換了一臺設(shè)備后，分辨率不同了，打印樣式會被破壞；

在開發(fā)環(huán)境中引入 print-js 的博文很多，且都很不錯(cuò)，在此就不再贅述了。直接上代碼！

需要打印的表體部分如下；注意這里為打印定義了一個(gè)id="printTable"；適配時(shí)用到id="rootDiv"；

<div id="rootDiv">
    <el-button type="primary" @click="handlePrint">打印表格</el-button>
    <el-table :data="tabData" border :cell-style="{'text-align':'center'}"
                  :header-cell-style="{'text-align':'center'}" 
                  :row-style="{ height: '84px' }"
                  id="printTable"
        >
          <el-table-column label="編號" prop="ordNum1" width="80"/>
          <el-table-column label="會計(jì)科目" prop="ledgerAcc1" width=""/>
          <el-table-column label="年初數(shù)" prop="beginBalance1" width=""/>
          <el-table-column label="期末數(shù)" prop="closeBalance1" width=""/>
          <el-table-column label="編號" prop="ordNum2" width="80"/>
          <el-table-column label="會計(jì)科目" prop="ledgerAcc2" width=""/>
          <el-table-column label="年初數(shù)" prop="beginBalance2" width=""/>
          <el-table-column label="期末數(shù)" prop="closeBalance2" width=""/>
    </el-table>
</div>

定義打印頂部模板，打印樣式，打印功能；

打印時(shí)的樣式，如果分辨率和筆者不同，

可以設(shè)置打印時(shí) CSS 樣式的縮放 zoom，邊距 margin；

或者 printJS 函數(shù)中參數(shù)的對象屬性 font_size 等來調(diào)整；

還可以在el-table-column標(biāo)簽中通過調(diào)整width大小表體列寬來適配；

請讀者仔細(xì)耐心瀏覽閱讀handlePrint()函數(shù)；筆者在里面做了詳細(xì)的注釋和解釋，并進(jìn)行了排版；

data(){
    return{
        // 打印時(shí)的樣式，如果分辨率和筆者不同，可以設(shè)置打印時(shí)的縮放，邊距，字體大小等來調(diào)整；
        // 還可以通過調(diào)整表體列寬來適配；
        printStyle: `
          @page {
              /* size:auto; */
              margin-top:90px;
              margin-left:20px; /* 設(shè)置打印頁面的左邊距 */
              margin-right:20px;
          }
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              /* height: 32px;
              line-height: 36px; */
              border: 1px solid #000;
            }
            body {
              zoom: 50%; /* 設(shè)置打印時(shí)的縮放 */
            }
            tbody {
              border: 1px solid #ff0000;
              // border: solid 1px red;
              /* color: green;  *//*設(shè)置字體顏色*/
              height: 36px;
              line-height: 26px;
              text-align: center;
              vertical-align: middle;
              // font_size: 100pt;
              /* font-family:'宋體'; */
              /* color: green; */
              // font_size: 28pt;
            }
            table {
              // color: red;
              // line-height: 36px;
              border-collapse: collapse;
            }
            `,
        // 打印時(shí)的頂部模板;
        topHtml: `
            <h2 style="text-align: center;width:227%;">食堂-資產(chǎn)負(fù)債表</h2>
            <div style="text-align:center;margin: 10px auto;font-size:80%;
                    width:227%;display: flex;flex-direction:row-reverse;">
              <div style="margin-right: 20px;margin-left: 10px;">金額單位:元</div>
              <div style="margin-right: 20px;">日期:2023-11</div>
              <div style="margin-right: 20px;">單位名稱:XXXX幼兒園</div>
            </div>
            `,
        // 表格數(shù)據(jù);
        tableData: [
                {
                 beginBalance1 : 'xxx58.32',
                 beginBalance2 : 'xxx242',
                 closeBalance1 : 'xxx655.63',
                 closeBalance2 : 'xxx30',
                 ledgerAcc1 : '一.資產(chǎn)類小計(jì)',
                 ledgerAcc2 : '二.負(fù)債類小計(jì)',
                 ordNum1 : '-',
                 ordNum2 : '-'
                },
                {
                 beginBalance1 : 'xx716.24',
                 beginBalance2 : 'x80',
                 closeBalance1 : 'xx786.59',
                 closeBalance2 : 'x80',
                 ledgerAcc1 : '銀行存款',
                 ledgerAcc2 : '應(yīng)付賬款',
                 ordNum1 : '1',
                 ordNum2 : '8',
                }
       ]
    }
},
methods: {
    handlePrint() {
      let rootDiv = document.getElementById('rootDiv')
      // 適配打印時(shí)的分辨率, 請讀者根據(jù)自己的PC,在此設(shè)置不同的分辨率
      rootDiv.style.height = '1200px'
      rootDiv.style.width = '1920px'
      /*
        這里做的比較巧妙和不容易想到的是，在打印之前將所有的設(shè)備分辨率改變?yōu)殚_發(fā)者電腦的分辨率，
        打印完成之后，又恢復(fù)為用戶默認(rèn)的分辨率；這樣就不用一一去考慮機(jī)型了；
      */
      // 定義了分辨率，當(dāng)前縮放與布局就不需要設(shè)置和調(diào)整了;
      let userAgent = navigator.userAgent
      //判斷是否Chrome瀏覽器
      if (userAgent.indexOf('Chrome') > -1) {
        console.log('Chrome')
        /*
           這里使用了setTimeout,讀者一定要注意給打印設(shè)置時(shí)間；
           當(dāng)前筆者設(shè)置了50毫秒的延時(shí)時(shí)間; 將打印放入了延時(shí)隊(duì)列，不然printJS立即執(zhí)行打印;
           而頁面分辨率還未適配成功，導(dǎo)致打印樣式適配失敗;
           這樣做給當(dāng)前的頁面適配分辨率渲染預(yù)留了足夠的時(shí)間;
        */
        setTimeout(() => {
          printJS({
            printable: 'printTable', // 標(biāo)簽元素id,表體;
            // maxWidth: 1150, // 最大寬度
            font_size: '26pt', // 設(shè)置打印時(shí)字體大小
            type: 'html',
            header: this.topHtml, // 打印頂部模板
            documentTitle: '',
            style: this.printStyle // 打印樣式
          })
          // 打印完之后 恢復(fù)默認(rèn)分辨率
          // rootDiv.style.height = window.screen.height + 'px'
          // rootDiv.style.width = window.screen.width + 'px'
          // 使用相對單位，這樣不會出現(xiàn)滾動條;
          rootDiv.style.height = 'auto'
          rootDiv.style.width = '100%'
        }, 50) 
      }
    },
}

如下圖，改變本機(jī)分辨率之后的打印顯示；