继上次信函打印之后，这个小项目需要完全移植到vue+webpack的项目中，中间经历很多波折，找了很多打印的小窍门，最终还是完成了基本的需求。
至此之前，这个打印的小项目完全是使用原生的html+js写的。之后我们尝试了使用Lodop插件实现打印功能，同样也使用了原生js和html，当然这些最后的尝试也成功了。
最后打算将这个小小的项目合并到vue项目中时，我们打算使用Lodop插件，可是以失败告终。对于我们几个vue小白来说，很是头疼。尤其是ES6的语法规范，让我们引入的Lodop.js第三方插件，无从下手。处理方法有两种：（1）重写ES6代码规范；（2）按照ES6的语法规范重写Lodop.js。对于这两种方法，按照我们自己的能力来说，着实不可靠。于是只能寻找其他的方法。
接下来，我们打算回头继续使用当时第一种实现方法。我们当时使用了Jquery的jQuery.PrintArea.js工具来实现的html局部打印。这个在vue+webpack项目中也是因为规范等等问题只能放弃。于是，我们疯狂的在npm官网中找寻，能够在这个项目中使用的第三方插件，或者其他的第三方js工具。当找到Print.js时很是高兴，可是使用之后发现并不像想象中使用jQuery.PrintArea.js那样得心应手。尤其是满足不了我们想要的打印样式的设置。最后决定重新找突破口，先能够满足打印的需求，几经辗转最后尝试使用方法如下：
var newWindow = window.open('.')
var docStr = this.$refs['letter-one'].$el.innerHTML
newWindow.document.write(docStr)
newWindow.document.close()
newWindow.print()
newWindow.close()
这个方法是再原生不过的，把想打印的区域作为document放入新的窗口newWindow，然后打印这个新窗口的内容。这个方法看着很low，但是通过这种方法，我们基本能够满足后面按照我们方法下的样式的设置，打印样式的渲染等等，用起来还是很爽的。
在这块碰到的问题是，当打印时修改页面的样式，但是由于页面样式的渲染有一个过程，开始不知道为什么打印时第一次样式没有改变，第二次样式就改变过来了（此时并没有设置刷新）。后来知道这个是因为页面来不及渲染，所以在修改样式后设置了一个等待时间再调用window.print()，这样就解决了这个问题。代码如下：
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打交道了。记得两个月前是第一次听到“组件”这个概念的，别说vue框架了。vue简直和html+原生js就是不同的理解，开始根本无法理解这些东西，就算打开文档在哪里看一个小时，说不定什么都没有看懂，一脸懵逼。就这样忍者干吧，有什么办法呢，哪个全栈工程师不是练出来的呢。哈哈。
慢慢的去接受和理解，什么是组件，<template>标签是什么鬼，自定义的标签又是什么，什么是数据双向绑定，什么是vue-router，以及到现在还是不明白的一些其他很多语法。慢慢的还是把单页打印做了出来。接着面临的是批量打印，这个在网上找了各种的方法，无意中有一次，因为打印的div区域中写了两个div，结果打印时出现的打印页的内容给了我很大的启发，就是在打印区域访很多个div，每个div的高度都设置成A4纸固定的高度，这样自动会挤成一页一页的A4纸大小。带着这种解决想法，在网上找了很多这种方法的可行性，其中看到一篇文章，有提到这种方法，并且那个小伙说已经用在项目中，给了我很大的鼓励。于是乎晚上回家试验了一番，果然可以，但是这个确实是有很大的局限性。局限性就不多说了，总之是不灵活。但是这就是完成批量打印的救命稻草。第二天开始启动，继续和vue斗争。
在批量打印时，使用了vue中v-for这个属性，这个属性让我感觉到了vue的力量，要是使用原来的那种原生对dom的操作，这个东西还是没有继续下去的头绪，因为前提不知道需要多少个div，而v-for将这个问题完美的解决了。
到此基本上这个打印的功能就能进行单打和批量打印了。也许其中存在着很多不足，比如没有使用比较主流的在线预览PDF，打印PDF这种方法。但是现在这种方法也是我们一起花费很大的力气搞成功的，我个人觉得还是比较认同的。
希望在这里一起努力的人都在进步，送大家一句话，“相信过程，你的脚步就会像蝴蝶一样轻盈。”
虽然不知道前面的路途怎样，但现在请保持行走的状态。
若三年如一日
网友评论