前端網頁列印外掛print.js(可匯出pdf)

Lemoncool 發表於 2020-12-30

在前端開發中,想列印當前網頁的指定區域內容,或將網頁匯出為多頁的PDF,可以藉助print.js實現,該外掛輕量、簡單、手動引入、不依賴其他庫。示範專案github:https://github.com/lemoncool/print-demo列印或匯出PDF後效果很好,下圖是對比圖:

前端網頁列印外掛print.js(可匯出pdf)

關於print.js


 功能:網頁列印外掛,支援列印或不列印指定區域,並且它還支援將網頁匯出為pdf。前提是可以接受該互動效果。

  • 已實現:

  原生js書寫

  不依賴其他庫可指定列印(或不列印)的區域

  支援定製css,內聯、外聯均可

  支援select、input(text、redio、checkbox)、textarea獲取引數

  • 待驗證:

  目前測試谷歌瀏覽器執行正常,其他低版本瀏覽器相容性待驗證

如何使用


 本外掛可在 js 或 vue 專案中使用,其他框架未驗證。兩種使用場景引入的 js 大同小異。

1、宣告列印區域:

可通過設定 class 類名或 id 指定列印區域,但vue專案涉及到打包部署,推薦使用 ref 獲取DOM節點,如果使用 id 或 class 獲取,打包部署後列印內容可能顯示空白。

<div class="printDom">指定列印區域</div>
 
<div id="printDom">指定列印區域</div>
 
<div ref="printDom">指定列印區域</div>

2、呼叫列印方法:

2.1 js 專案
// 引入
<script src="print.js"></script>
 
// 呼叫
Print('#printDom',{});
2.2 vue 專案

main.js引入,xx.vue頁面引用

//main.js
import Print from './print';
Vue.use(Print);
 
// xx.vue
this.$print(this.$refs.printDom, {}); 

3、宣告不列印區域:

js 和 vue 專案通用

3.1 宣告"no-print"類名

print方法中,不需要特意宣告,在列印時預設會剔除.no-print區域。

<div class="no-print">不列印區域</div>
 
Print('#printDom');
3.2 自定義類名

此時需要在print方法中通過"noPrint"屬性指定不列印區域。

<div class="no-print-box">自定義不列印區域類名</div>
 
Print('#printDom',{noPrint:'.no-print-box'});

4、引數說明:

js 和 vue 專案通用,以 vue 專案為例。

this.$print(this.$refs.printDom, {
    noPrint: '.noPrint',
    onStart: () => {
        console.log('列印開始');
    },
    onEnd: () => {
        onsole.log('列印完成');
    }
});

 

引數位置
屬性
說明
引數1
類名、id、ref宣告dom
列印區域
 
noPrint
不列印區域,預設'.no-print'
引數2
onStart
列印前回撥函式
 
onEnd
列印後回撥函式,確定和取消都會觸發

5、vue專案可能遇到的問題,見下圖:

前端網頁列印外掛print.js(可匯出pdf) 

1、el-select中,文字過長,超出了顯示寬度。這種情況在網頁上,可以通過下拉框選項看完整文字。但是此時匯出頁面是沒有互動的。

  解決辦法:儘可能把下拉框寬度調寬,如果效果仍然不好,可以考慮在下拉框同級寫個textarea,在列印時,控制下拉框和文字域的顯示隱藏。

 

2、選項的背景色沒有正常顯示。  

解決辦法:為列印區域的最外層容器設定樣式,如果專案中安裝了node-sass,也可直接為body加樣式。兩種方式任選其一。

<style>
.printContainer {
    -webkit-print-color-adjust: exact;
  }
</style>
 
 
<!--以下方式需要專案引入node-sass-->
<style lang="scss">
@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}
</style>

3、<el-input type="textarea" autosize></el-input>在列印預覽時,顯示高度錯誤。

  原因:vue頁面中,列印區域的寬度大於列印預覽時頁面寬度。在生成列印預覽檔案時,textarea沒有重新計算,直接將vue頁面下的height搬了過來,從而引發了列印時textarea文字展示高度不夠的問題。

  解決辦法:可以的話,為列印區域的最外層容器設定寬度。值接近列印預覽時寬度,700px左右即可。或者想辦法在列印的一瞬間,讓該文字域先隱藏,再展示,也可以觸發重新計算,也可規避此問題。

 

4、vue頁面中,顯示"列印"按鈕,在列印時不想列印該按鈕。

  解決辦法:見本文上述第三節提到的指定不列印指定區域。

 

5、列印預覽時顯示undefined。

  檢查是否把 ref 繫結在了el-xx 標籤上,如果是,試試外層包一個div,ref 綁在div上。

 

6、列印預覽時,顯示空白。

  檢查一下print.js檔案,toPrint 方法中, 是否有load方法。因為我在其他網頁連結中看到過不同版本的print.js。

前端網頁列印外掛print.js(可匯出pdf)

6、例項專案介紹:   

看到這裡,如果清楚了該外掛如何使用,可以直接引用 print.js 檔案到你的專案

vue專案可引入 (檔案連結

 js專案引入(檔案連結)

同時,也有一份示例專案,可點選此處獲取原始碼(如果有用,還請點選一下 Star)。專案詳細介紹見 README。

 
沒什麼才藝,給大家跳段街舞 ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ,歡迎大家關注我的部落格或公棕號啦,來了都是客,鞠躬♡♡