今天小編在代課的時候，發現很多剛剛接觸前端領域的同學還不太清楚如何實現用戶區域打印，網上的很多博客也只是只貼出了解決代碼，但或許并不幫助大家了解其到底是什么意思。

小編今天就具體的來給講一講如何在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里隨時取值 同時執行初始化方法。

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前端來實現打印的方法有一個新的理解，希望能給到大家一些幫助~