前端網頁列印外掛print.js(可匯出pdf)
在前端開發中,想列印當前網頁的指定區域內容,或將網頁匯出為多頁的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。
୨୧┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈୨୧沒什麼才藝,給大家跳段街舞 ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ,歡迎大家關注我的部落格或公棕號啦,來了都是客,鞠躬♡♡