在前端開發中，想打印當前網頁的指定區域內容，或將網頁導出為多頁的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 文件到你的項目
同時，也有一份示例項目，可點擊此處獲取源碼(如果有用，還請點擊一下 Star)。項目詳細介紹見 README。
沒什么才藝，給大家跳段街舞 ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ，歡迎大家關注我的博客或公棕號啦，來了都是客，鞠躬♡♡