前端實(shí)用技術(shù)分享—用Vue實(shí)現(xiàn)打印指定區(qū)域

今天小編在代課的時(shí)候，發(fā)現(xiàn)很多剛剛接觸前端領(lǐng)域的同學(xué)還不太清楚如何實(shí)現(xiàn)用戶區(qū)域打印，網(wǎng)上的很多博客也只是只貼出了解決代碼，但或許并不幫助大家了解其到底是什么意思。

小編今天就具體的來給講一講如何在vue-cli的環(huán)境下實(shí)現(xiàn)web的打印指定區(qū)域的內(nèi)容(文字或者表格圖表)，讓大家在學(xué)習(xí)的過程中少走一些彎路。

走起，先看完成效果圖：

如何實(shí)現(xiàn)上訴需求呢，接下來咱們就一一講解，首先咱們先把代碼切分為四個部分：

1.創(chuàng)建一個構(gòu)造函數(shù)Print

2.給Print的prototype添加需要用到方法

3.聲明一個常量MyPlugin 為它添加方法 將Print方法掛載到Vue原型鏈上

4.export導(dǎo)出MyPlugin

第一步創(chuàng)建一個構(gòu)造函數(shù)Print 默認(rèn)接受兩個參數(shù) 一個是打印的指定區(qū), 一個是自定義頁眉的標(biāo)題。 （要注意哦，這里有些同學(xué)可能會不懂這個判斷的意思，因?yàn)檫@里的this是指向Vue的，通過instanceof 來判斷這時(shí)候的this是否為Print的子類，如果不是，就通過new操作符調(diào)用，使this指向Print本身。）然后這里做一個容錯,判斷一下傳進(jìn)來的dom是否為object、是否有nodeType和nodeName這兩個屬性，如果沒有，證明不是一個節(jié)點(diǎn)，那就取dom下的$el，然后把處理過后的dom和name分別賦值給this.dom和this.name，方便在prototype里隨時(shí)取值 同時(shí)執(zhí)行初始化方法。

init方法里為了實(shí)現(xiàn)打印并且自定義標(biāo)題，我們需要重新獲取到樣式和頁面元素展示到一個新的html里面，最后通過writeIframe方法完成咱們最終打印的效果。

在getStyle方法里，自定義一個空字符串，通過 querySelectorAll 方法獲取到當(dāng)前頁面全部的style和link標(biāo)簽，并且通過循環(huán)拿到每一個的outerHTML（純文本形式）最后通過return暴露出來。

getHtml方法，主要是特殊處理一下 input、textarea、select、canvas。把前三個打value值重新獲取通過innerHTML的方法展現(xiàn)出來，把canvas畫布轉(zhuǎn)換成圖片的格式展現(xiàn)出來。然后進(jìn)入下一步setHeader方法，來自定義頁眉的標(biāo)題。

這里是因?yàn)樵贒OM上，input、textarea、select中的值并沒有在元素內(nèi)，只有純文本才可以被print()，同樣打印也不支持canvas。所以咱們需要重新處理一下，使里面的值也可以被打印出來~

在這一步，實(shí)際上是重新創(chuàng)建了一個html標(biāo)簽和title，然后通過克隆出要打印的區(qū)域，添加到新創(chuàng)建的html當(dāng)中，然后return出這個新頁面里的全部純文本元素。這個時(shí)候已經(jīng)需要打印的html和自定義標(biāo)題已經(jīng)出來了。（這里同學(xué)們千萬要注意，因?yàn)榇蛴〉哪J(rèn)標(biāo)題是頁面里的title，如果直接改變原頁面的title來實(shí)現(xiàn)自定義標(biāo)題效果的話，會造成原頁面的title錯亂。）

這個時(shí)候回到init方法 content就是咱們?nèi)啃枰斎氲臉?biāo)簽。執(zhí)行writeIframe方法，這里面主要是通過document.open 來打開一個新文檔，document.write來編寫文檔的內(nèi)容，document.close 來關(guān)閉文檔操作 使其內(nèi)容可以顯示出來

然后紅線圈出的地方有一個獲取全部類名為isNeedRemove的操作，是因?yàn)橹霸诎裞anvas轉(zhuǎn)換成圖片的時(shí)候 給每個的后面都插入了一個轉(zhuǎn)換后的img 這里為了讓圖形不出現(xiàn)兩個的情況需要刪除所有類名為isNeedRemove的節(jié)點(diǎn)，同時(shí)執(zhí)行最終的打印方法。

這里的frameWindow形參其實(shí)就是咱們需要調(diào)用到的window，通過try catch來保證結(jié)果在一個控制范圍內(nèi)，如果成功運(yùn)行，調(diào)用window下的print方法，失敗則拋出異常。

最終將寫好的方法添加到vue的原型鏈上，在公共的main.js 里通過import 引入，Vue.use掛載，然后在想要使用的組件內(nèi)直接通過this.$print()使用即可。

好啦~今天講到這里希望大家對這個web前端來實(shí)現(xiàn)打印的方法有一個新的理解，希望能給到大家一些幫助~