打印小项目的总结（二）

继上次信函打印之后，这个小项目需要完全移植到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就是不同的理解，开始根本无法理解这些东西，就算打开文档在哪里看一个小时，说不定什么都没有看懂，一脸懵逼。就这样忍者干吧，有什么办法呢，哪个全栈工程师不是练出来的呢。哈哈。

慢慢的去接受和理解，什么是组件，