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，如圖拿走不謝，但要強調以下幾點，避免踩坑。
- 必須把PDFShow文件夾放到static下面，這裏面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer頁面，如果放到別的地方fis只會按需編譯，把重要文件都無法正常的編譯過去，如果放在static下面，會把它作為靜態資源來編譯，基本想要的build和web這兩個重要文件夾的東西都正常編譯。
- 頁面中用iframe把呈現pdf的viewer.html以相對路徑引進來，需要展現的文件可以是其它類型直接放在file後面就好，也可以是請求來的後臺路徑，請求路徑放在計算屬性中就好，如圖：
3. pdf暫且不要npm,直接以PDFShow的文件夾的方式就好，具體資源可以到我的github上下載。
結果就是這樣的畫面，是不是很完美，還有很齊全的功能哦！
進入尾聲了，首先很感謝pdf.js的作者，創造了這麽神奇的插件，讓我們有機會來學習改造；其次感謝fis團隊創造了這麽強大的自動化工具，讓我們重新看到了前端之美；最後感謝一下我自己，為後人在基於fis和vue做pdf預覽時掃清了障礙。
鄙人的第一篇博客，廢話太多，幹貨不少，歡迎各位有識之士指正，評論，多多交流益善，謝謝！！！
fis3+vue+pdf.js制作預覽PDF文件或其他