fis3+vue+pdf.js制做预览PDF文件或其余

　　人生第一篇博客，的确有点紧张，但有些许兴奋，由于这对于我来讲应该是一个好的开始，以此励志在技术的道路上越走越远。

　　看过了多多少少的技术博客，给本身带来了不少技术上的收获，也所以在想何时本身也能够赠人玫瑰，手留余香呢？终于时候到了...哈哈

　　首先容我吐槽一番，在大前端的背景下各类框架层出不穷，相对的各类打包工具也应用而生，要说最火的就是webpack了，用户多因此社区相对活跃，团队维护，网上也有各类各样的问题能够轻易搜到从而解决本身的遇到的各类奇葩问题，因此90%的项目都会采用webpack来做为构建工具，可是呢强龙不压地头蛇，在我厂就得个人地盘我作主，fis3!fis3!fis3!以前历来都没听过的打包工具就这样硬生生的走进了个人世界，好吧，人在屋檐下，不得不低头！今后开始了各类各样的坑，最关键的是网上根本搜不到想要的答案，主要是少之又少，千万别说Google，我厂与它水火不相容，好吧，一路而来饱受折磨，由此萌生了记录一些心得，后人少踩坑就算我最好的祝福了，第一篇博客请原谅我罗嗦了一堆，硬货如今开始。。。

　　今天主要说的是前段时间在实际项目中的一个需求，在线预览PDF，想必你们都经历过相似QQ窗口能够预览文件那些，刚接到这个需求后感受简单，虽然本身没作过，可是随便一搜一堆，应该没什么问题，等到开始作了才知道站着说话不腰疼，各类插件应有尽有，其中最合适的就是vue-pdf了，因此坚决果断的选择了这个插件，跟着人家的流程各类下载各类配置，结果傻眼了，各类报错，寻思着解决错误吧，最终仍是没能坚持下来，人家是基于webpack的各类配置，因此放弃了，接下里尝试pdf.js,直接npm了pdf，结果编译直接报错缺乏fs,stream,buffer模块，马上闪瞎双眼，这些都是node的核心模块啊，为啥还须要安装，只好妥协安装一下，结果仍是编译不过去，这我就没办法了，折腾了半天也迫不得已，又放弃了，接下里开始尝试基于jquery的各类插件，为了实现这个功能我还得把jquery.js引进来，心想若是实现了功能也算，也不怕别人笑话了，结果又是各类报错，成功不了还白白的增长了好几百KB的体积，也怕别人看到后笑话，因此果断的舍弃了，踏破铁鞋无觅处，得来全不费工夫，绕了一圈结果回到了原点，我静下来想了一下，咱这个项目是fis3编译，pdf,js那么强大是不值得怀疑的，惟一可怀疑的就是fis3和pdf.js之间的配置以及pdf的使用有问题，只好从新开始Google了。。。

　　看了一下子Google，发现http://www.cnblogs.com/kagome2014/p/kagome2014001.html这篇文章的思路是用的比较多的，因此就从这里出发，从新开始写码，大体过程就如这篇文章说的那样，可是重点是咱的项目是fis3，虽然仍是各类报错，可是没用时间去折腾了，只能解决问题了，好在功夫不负有心人，终于完美的实现了线上预览PDF,一路辛酸只有本身知道，从而也懂得了适合本身的才是最好的，本篇文章就是专门介绍如何用fis3打包工具和vue框架实现pdf预览的。

　　今天下午本身搭了fis的环境，搭环境是很难的，尤为是fis的配置，都想哭了，历时两个小时才把demo弄好，完整的上传到了个人github,项目地址为https://github.com/lewiscutey/PDF，如图拿走不谢，但要强调如下几点，避免踩坑。

1. 必须把PDFShow文件夹放到static下面，这里面有核心的pdf.js和pdf.worker.js,以及展现pdf的viewer页面，若是放到别的地方fis只会按需编译，把重要文件都没法正常的编译过去，若是放在static下面，会把它做为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。
2. 页面中用iframe把呈现pdf的viewer.html以相对路径引进来，须要展示的文件能够是其它类型直接放在file后面就好，也能够是请求来的后台路径，请求路径放在计算属性中就好，如图：

　　3. pdf暂且不要npm,直接以PDFShow的文件夹的方式就好，具体资源能够到个人github上下载。

　　结果就是这样的画面，是否是很完美，还有很齐全的功能哦！

　　进入尾声了，首先很感谢pdf.js的做者，创造了这么神奇的插件，让咱们有机会来学习改造；其次感谢fis团队创造了这么强大的自动化工具，让咱们从新看到了前端之美；最后感谢一下我本身，为后人在基于fis和vue作pdf预览时扫清了障碍。

　　鄙人的第一篇博客，废话太多，干货很多，欢迎各位有识之士指正，评论，多多交流益善，谢谢！！！