摘要:最近項(xiàng)目中需求為在瀏覽器上閱覽格式的文件,之前沒有寫過,隨即上網(wǎng)查閱,發(fā)現(xiàn)大家常使用的為兩個(gè)插件。不過我遷移到公司項(xiàng)目的時(shí)候遇到一個(gè)坑,引入這個(gè)插件的時(shí)候就會(huì)報(bào)錯(cuò),后來查詢資料發(fā)現(xiàn)這篇文章,問題才得已解決,感謝作者。
最近項(xiàng)目中需求為在瀏覽器上閱覽PDF格式的文件,之前沒有寫過,隨即上網(wǎng)查閱,發(fā)現(xiàn)大家常使用的為兩個(gè)插件。
其一是火狐出品的pdf.js,github地址:https://github.com/mozilla/pd...;
其二是PDFObject,額,不太清楚作者,github地址:https://github.com/pipwerks/P...。
前者功能強(qiáng)大,社區(qū)活躍,后者是基于jquery封裝出來的插件,要是在vue中混著jquery總感覺怪怪的,所以我選擇了前者。
又看了一下有沒有輪子可用,誒嘿,vue-pdf,github地址:https://github.com/FranckFrei...??戳宋臋n,可取。
首先下載插件(建議先新建一個(gè)demo出來跑,直接擼到開發(fā)項(xiàng)目中...出什么幺蛾子...)
// 我使用的是yarn npm的話 npm install vue-pdf --dev yarn add vue-pdf --dev
然后在vue文件中引入使用,建議新建一個(gè)vue文件二次封裝
之后就可以愉快的玩耍了。
不過我遷移到公司項(xiàng)目的時(shí)候遇到一個(gè)坑,引入這個(gè)插件的時(shí)候就會(huì)報(bào)錯(cuò)window is not defined,后來查詢資料發(fā)現(xiàn)這篇文章,問題才得已解決,感謝作者。https://blog.csdn.net/u010745...
只需要在webpack中設(shè)置如下
module.exports = { // 請(qǐng)忽視這無關(guān)的代碼 output: { globalObject: "this" } // 請(qǐng)忽視這無關(guān)的代碼 }
以上。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/102283.html
摘要:我使用前端開發(fā)框架是有一個(gè)打印文檔的需求這個(gè)需求最開始是交給后臺(tái)但是明顯不切實(shí)際因?yàn)楹笈_(tái)服務(wù)器根本就無法連接打印機(jī)所以這個(gè)預(yù)覽加打印文檔的需求就交到了前端開始我有想過直接打開文件但事實(shí)上直接打開文件的表現(xiàn)不太好如果是在的環(huán)境下會(huì)直接下載文件 我使用前端開發(fā)框架是vue,有一個(gè)打印PDF文檔的需求.這個(gè)需求最開始是交給后臺(tái),但是明顯不切實(shí)際, 因?yàn)楹笈_(tái)服務(wù)器,根本就無法連接打印機(jī).所以這...
摘要:知識(shí)點(diǎn)總結(jié)一實(shí)現(xiàn)頁面的緩存二移動(dòng)端固定定位的解決方案三表單校驗(yàn)表單驗(yàn)證中文文檔橫向滑動(dòng)的選項(xiàng)卡,以及輸入法定位相關(guān)的插件網(wǎng)當(dāng)?shù)谝粋€(gè)輸入框自動(dòng)獲得光標(biāo)的時(shí)候,彈出的輸入法會(huì)把布局頂上去問題可以左右滑動(dòng)的將項(xiàng)目中引入框架和插件當(dāng)?shù)谝粋€(gè)輸 ======================知識(shí)點(diǎn)總結(jié)=========================== 一、keep-alive(實(shí)現(xiàn)頁面的緩存) ...
閱讀 1933·2021-11-24 09:39
閱讀 2650·2021-10-14 09:43
閱讀 3364·2021-10-08 10:10
閱讀 2372·2021-09-22 15:54
閱讀 2380·2019-08-29 17:20
閱讀 1601·2019-08-28 18:14
閱讀 2401·2019-08-26 13:28
閱讀 1145·2019-08-26 12:16