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