今天小編在教課的時候，發現很多剛剛接觸這個領域的同學對一些小的細節部分還是存在疑惑，網上的很多博客也只是只貼出了代碼，並不瞭解是什麼意思，小編今天就具體的來給大家講一講如何在vue-cli的環境下實現web的打印指定區域的內容(文字或者表格圖表)，讓大家在學習的過程中少走一些彎路。
走起，先看效果圖：
如何實現上訴需求呢，咱們來一一講解，首先咱們先把代碼切分為四個部分：
1.創建一個構造函數Print
2.給Print的prototype添加需要用到的方法
3.聲明一個常量MyPlugin為它添加方法，將Print方法掛載到Vue原型鏈上
4.export導出MyPlugin
第一步 創建一個構造函數Print，默認接受兩個參數，一個是打印的指定區，一個是自定義頁眉的標題。 要注意哦，有些同學這裡可能會不懂這個判斷的意思，因為這裡的this是指向Vue的通過instanceof來判斷這時候的this是否為Print的子類，如果不是，就通過new操作符調用，使this指向Print本身。
然後這裡做一個容錯，判斷一下傳進來的dom是否為object、是否有nodeType和nodeName這兩個屬性，如果沒有，證明不是一個節點，那就取dom下的$el，然後把處理過後的dom和name分別賦值給this.dom和this.name，方便在prototype裡隨時取值同時執行初始化方法。
第二步 給Print的prototype添加需要用到的方法，
init方法裡為了實現打印並且自定義標題，我們需要重新獲取到樣式和頁面元素，展示到一個新的html裡面，最後通過writeIframe方法完成咱們最終打印的效果。在getStyle方法裡，自定義一個空字符串，通過querySelectorAll方法獲取到當前頁面全部的style和link標籤，並且通過循環拿到每一個的outerHTML（純文本形式）最後通過return暴露出來
getHtml方法主要是特殊處理一下input、textarea、select、canvas把前三個打value值重新獲取通過innerHTML的方法展現出來，把canvas畫布轉換成圖片的格式展現出來。
然後進入下一步setHeader方法，來自定義頁眉的標題。這裡是因為在DOM上，input、textarea、select中的值並沒有在元素內，只有純文本才可以被print()，同樣打印也不支持canvas。所以咱們需要重新處理一下，使裡面的值也可以被打印出來~
在這一步，咱們實際上是重新創建了一個html標籤和title，然後通過克隆出要打印的區域，添加到新創建的html當中。然後return出這個新頁面裡的全部純文本元素。這個時候已經咱們需要打印的html和自定義標題已經出來了。這裡同學們千萬要注意，因為打印的默認標題是頁面裡的title，如果直接改變原頁面的title來實現自定義標題效果的話，會造成原頁面的title錯亂。
這個時候回到init方法，content就是咱們全部需要輸入的標籤。執行writeIframe方法，這裡面主要是通過document.open來打開一個新文檔，document.write來編寫文檔的內容，document.close來關閉文檔操作使其內容可以顯示出來。
然後紅線圈出的地方有一個獲取全部類名為isNeedRemove的操作，是因為之前在把canvas轉換成圖片的時候，給每個的後面都插入了一個轉換後的img這裡為了讓圖形不出現兩個的情況，需要刪除所有類名為isNeedRemove的節點，同時執行最終的打印方法。
這裡的frameWindow形參其實就是咱們需要調用到的window，通過try catch來保證結果在一個控制範圍內，如果成功運行調用window下的print方法，失敗則拋出異常。
最終將寫好的方法添加到vue的原型鏈上，在公共的main.js 裡通過import引入，Vue.use掛載，然後在想要使用的組件內直接通過this.$print()使用即可
好啦~今天講到這裡希望大家對這個web前端來實現打印的方法有一個新的理解，希望能給到大家一些幫助~咱們下期再見。
閱讀更多 AI課工場 的文章
