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

Lemoncool發表於2020-12-30
前端網頁JS

在前端開發中，想列印當前網頁的指定區域內容，或將網頁匯出為多頁的PDF，可以藉助print.js實現，該外掛輕量、簡單、手動引入、不依賴其他庫。示範專案github：https://github.com/lemoncool/print-demo。列印或匯出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專案可能遇到的問題，見下圖：

 

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。

6、例項專案介紹：   

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

vue專案可引入 （檔案連結）

 js專案引入（檔案連結）

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

 ୨୧┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈୨୧

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

相關文章