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預覽時掃清了障礙。

　　鄙人的第一篇博客，廢話太多，乾貨很多，歡迎各位有識之士指正，評論，多多交流益善，謝謝！！！