最近這段時間，用VUE寫東西，有個打印功能。
百度了一下，鋪天蓋地的VUE打印的兩種實現方法。
很感激這些千篇一律的帖子，雖然不知道他們是否真的用過，還是只是復制粘貼。
至少這些帖子告訴我，是有兩個可以選擇的，並且多看幾篇帖子，總算把這兩個打印方法，都試了一遍。
下面簡單總結一下：
先說結論：請使用第二種方法，下載print.js到本地，然后放到項目中導入。原因后邊說。
一、使用vue-print-nb方法
具體的使用這里就不詳細說明了，因為網上真的太多太多了。千篇一律的。
在本地直接npm安裝一下就好。按照步驟一點一點來。
然后在自己項目的配置文件里import進來就可以了。
使用就更簡單了。選好區域直接調用即可。
打印效果超出預期的好。感謝這個插件的作者！
二、使用print.js方法
這個簡單的程度更不用說了。就是一個JS下載下來，直接放到項目中（libs目錄）
然后同樣import導入，並use就可以使用了。
使用方法同樣簡單，只是寫法上看着比第一種感覺上low那么一丟丟，但是真的是超級的簡單好用哦。
同時，效果上和第一個基本上一模一樣。
使用說完了，說說問題吧。
對比：
1、安裝和使用
方法一，需要npm安裝，說簡單也簡單，說復雜也復雜。並且所有項目參與者都要安裝，否則會報錯。
方法二，不需要做什么，只要有一個搞到項目中，其他人版本庫中拉代碼即可。維護簡單方便。
2、調試和維護
方法一，源碼相對屬於不直接公開的，想看需要到node_modules目錄去找，修改日后維護成本稍微高點。
方法二，源碼就一個print.js文件，在項目目錄中，隨時都可以看到，隨時可以修改調試，簡單方便。並且代碼還少哦。
3、使用時的BUG
方法一，存在跨域的BUG，就是link里邊的樣式路徑必須是相對路徑或者與站點同域，否則會垮掉。
方法二，目前沒有發現使用上的BUG。
最后，應用中碰到的問題
最開始使用的是方法一，看着高端。哈哈……但是本坑慘了，因為本地調試和測試環境都沒問題。所以一直也就沒有發現BUG。直到上線后，再測試才發現問題。因為生產環境CSS是走CDN的，域名不一致了，導致JS報錯。打印功能垮掉。
最終臨時下掉打印功能，還要想業務部門解釋。畢竟答應沒做到么。
接下來，解決問題。通過查看源碼，不斷調試驗證，最終發現，就是類似跨域的問題，導致讀取link里邊的文件失敗。報錯后終止了JS的執行。當然，BUG原因也找到了，改是能改，但是比較麻煩，畢竟源碼不在項目中。
然后，嘗試使用print.js來實現打印，先確認一下，至少不會有方法一的BUG，然后也做了各測試，確實沒有方法一的問題。所以最終我們現在使用這個。但是，因為還沒有正式使用，也沒有發現問題。
等以后用久了，再看看。不過，源碼在項目中，修改多少也方便點兒。
還有個問題，就是打印預覽時，發現多出一個空白頁，打印時也會真的打印一個空白頁出來。
經過各種折騰，真沒發現原因，網上搜索了一下，真心解決辦法很少，有一個說的不明不白，有一個說的是body的默認margin的默認值問題。
但是可惜，我這邊都不是，所以，在沒有辦法下，只能自己一點點的調試。什么情況下會有東西超出頁面。
不知道最終原因（原理），但是解決了，就是高度100%的問題。頁面打印部分有標簽高度設置了100%，但是視覺上沒有超出，打印時，莫名的就影響了，多出一個空白頁。
把這個高度100%刪除，就沒有空白頁了。
所以，出現空白頁，注意兩點：1、body的margin屬性改成0；2、找到height屬性為100%的嘗試修改成其他值或者刪除該屬性。