繼上次信函打印之后赖临，這個(gè)小項(xiàng)目需要完全移植到vue+webpack的項(xiàng)目中鲤脏，中間經(jīng)歷很多波折秸歧，找了很多打印的小竅門厨姚，最終還是完成了基本的需求。
至此之前键菱，這個(gè)打印的小項(xiàng)目完全是使用原生的html+js寫的谬墙。之后我們嘗試了使用Lodop插件實(shí)現(xiàn)打印功能，同樣也使用了原生js和html纱耻，當(dāng)然這些最后的嘗試也成功了芭梯。
最后打算將這個(gè)小小的項(xiàng)目合并到vue項(xiàng)目中時(shí)险耀，我們打算使用Lodop插件弄喘，可是以失敗告終。對于我們幾個(gè)vue小白來說甩牺，很是頭疼蘑志。尤其是ES6的語法規(guī)范，讓我們引入的Lodop.js第三方插件，無從下手急但。處理方法有兩種：（1）重寫ES6代碼規(guī)范澎媒；（2）按照ES6的語法規(guī)范重寫Lodop.js。對于這兩種方法波桩，按照我們自己的能力來說戒努，著實(shí)不可靠。于是只能尋找其他的方法镐躲。
接下來储玫，我們打算回頭繼續(xù)使用當(dāng)時(shí)第一種實(shí)現(xiàn)方法。我們當(dāng)時(shí)使用了Jquery的jQuery.PrintArea.js工具來實(shí)現(xiàn)的html局部打印萤皂。這個(gè)在vue+webpack項(xiàng)目中也是因?yàn)橐?guī)范等等問題只能放棄撒穷。于是，我們瘋狂的在npm官網(wǎng)中找尋裆熙，能夠在這個(gè)項(xiàng)目中使用的第三方插件端礼，或者其他的第三方j(luò)s工具。當(dāng)找到Print.js時(shí)很是高興入录，可是使用之后發(fā)現(xiàn)并不像想象中使用jQuery.PrintArea.js那樣得心應(yīng)手蛤奥。尤其是滿足不了我們想要的打印樣式的設(shè)置。最后決定重新找突破口僚稿，先能夠滿足打印的需求喻括，幾經(jīng)輾轉(zhuǎn)最后嘗試使用方法如下：
var newWindow = window.open('.')
var docStr = this.$refs['letter-one'].$el.innerHTML
newWindow.document.write(docStr)
newWindow.document.close()
newWindow.print()
newWindow.close()
這個(gè)方法是再原生不過的，把想打印的區(qū)域作為document放入新的窗口newWindow贫奠，然后打印這個(gè)新窗口的內(nèi)容唬血。這個(gè)方法看著很low，但是通過這種方法唤崭，我們基本能夠滿足后面按照我們方法下的樣式的設(shè)置拷恨，打印樣式的渲染等等，用起來還是很爽的谢肾。
在這塊碰到的問題是腕侄，當(dāng)打印時(shí)修改頁面的樣式，但是由于頁面樣式的渲染有一個(gè)過程芦疏，開始不知道為什么打印時(shí)第一次樣式?jīng)]有改變冕杠，第二次樣式就改變過來了（此時(shí)并沒有設(shè)置刷新）。后來知道這個(gè)是因?yàn)轫撁鎭聿患颁秩舅彳睿栽谛薷臉邮胶笤O(shè)置了一個(gè)等待時(shí)間再調(diào)用window.print()分预，這樣就解決了這個(gè)問題。代碼如下：
this.$refs['letter-one'].lt1ChangeStyle()
setTimeout(() => {
var newWindow = window.open('.')
var docStr = this.$refs['letter-one'].$el.innerHTML
newWindow.document.write(docStr)
// newWindow.document.close()
newWindow.print()
newWindow.close()
}, 500)
setTimeout(() => {
this.$refs['letter-one'].refreshPage()
}, 500)
這種方法薪捍，也是沒有辦法中的辦法笼痹，就這樣擼起袖子干下去了配喳。
這些東西就怕沒有思路，只要有了思路凳干，再難也能找到解決問題的辦法晴裹。接下來就是更多的和vue打交道了。記得兩個(gè)月前是第一次聽到“組件”這個(gè)概念的救赐，別說vue框架了涧团。vue簡直和html+原生js就是不同的理解，開始根本無法理解這些東西经磅，就算打開文檔在哪里看一個(gè)小時(shí)少欺，說不定什么都沒有看懂，一臉懵逼馋贤。就這樣忍者干吧赞别，有什么辦法呢，哪個(gè)全棧工程師不是練出來的呢配乓。哈哈仿滔。
慢慢的去接受和理解，什么是組件犹芹，<template>標(biāo)簽是什么鬼崎页，自定義的標(biāo)簽又是什么，什么是數(shù)據(jù)雙向綁定腰埂，什么是vue-router飒焦，以及到現(xiàn)在還是不明白的一些其他很多語法。慢慢的還是把單頁打印做了出來屿笼。接著面臨的是批量打印牺荠，這個(gè)在網(wǎng)上找了各種的方法，無意中有一次驴一，因?yàn)榇蛴〉膁iv區(qū)域中寫了兩個(gè)div休雌，結(jié)果打印時(shí)出現(xiàn)的打印頁的內(nèi)容給了我很大的啟發(fā)，就是在打印區(qū)域訪很多個(gè)div肝断，每個(gè)div的高度都設(shè)置成A4紙固定的高度杈曲，這樣自動(dòng)會(huì)擠成一頁一頁的A4紙大小。帶著這種解決想法胸懈，在網(wǎng)上找了很多這種方法的可行性担扑，其中看到一篇文章，有提到這種方法趣钱，并且那個(gè)小伙說已經(jīng)用在項(xiàng)目中涌献，給了我很大的鼓勵(lì)。于是乎晚上回家試驗(yàn)了一番羔挡，果然可以洁奈，但是這個(gè)確實(shí)是有很大的局限性间唉。局限性就不多說了绞灼，總之是不靈活利术。但是這就是完成批量打印的救命稻草。第二天開始啟動(dòng)低矮，繼續(xù)和vue斗爭印叁。
在批量打印時(shí)，使用了vue中v-for這個(gè)屬性军掂，這個(gè)屬性讓我感覺到了vue的力量轮蜕，要是使用原來的那種原生對dom的操作，這個(gè)東西還是沒有繼續(xù)下去的頭緒蝗锥，因?yàn)榍疤岵恢佬枰嗌賯€(gè)div跃洛，而v-for將這個(gè)問題完美的解決了。
到此基本上這個(gè)打印的功能就能進(jìn)行單打和批量打印了终议。也許其中存在著很多不足汇竭，比如沒有使用比較主流的在線預(yù)覽PDF，打印PDF這種方法穴张。但是現(xiàn)在這種方法也是我們一起花費(fèi)很大的力氣搞成功的细燎，我個(gè)人覺得還是比較認(rèn)同的。
希望在這里一起努力的人都在進(jìn)步皂甘，送大家一句話玻驻，“相信過程，你的腳步就會(huì)像蝴蝶一樣輕盈偿枕¤邓玻”
雖然不知道前面的路途怎樣劣摇，但現(xiàn)在請保持行走的狀態(tài)陌凳。
