成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue項(xiàng)目中使用基于pdf.js的vue-pdf插件在pc瀏覽器下閱覽PDF文件

Martin91 / 2912人閱讀

摘要:最近項(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

相關(guān)文章

  • vue使用 pdf.js 預(yù)覽 和 打印 PDF文檔 兼容React

    摘要:我使用前端開發(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ī).所以這...

    vvpvvp 評(píng)論0 收藏0
  • VueJs項(xiàng)目筆記

    摘要:知識(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)頁面的緩存) ...

    iliyaku 評(píng)論0 收藏0
  • 前端插件

    摘要:原文鏈接前端插件庫站點(diǎn)前端開發(fā)文檔博客前端插件庫前端插件庫官網(wǎng)是的函數(shù)庫,目的是強(qiáng)化表格操作如搜索排序,并自動(dòng)加入組件引入表格中,使用非常靈活簡(jiǎn)便。由推出,靈活扎實(shí)的建議列表函數(shù)庫。 原文鏈接:前端插件庫站點(diǎn):前端開發(fā)文檔博客:前端插件庫 前端插件庫 DataTables 官網(wǎng):https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高勝山 評(píng)論0 收藏0
  • 前端插件

    摘要:原文鏈接前端插件庫站點(diǎn)前端開發(fā)文檔博客前端插件庫前端插件庫官網(wǎng)是的函數(shù)庫,目的是強(qiáng)化表格操作如搜索排序,并自動(dòng)加入組件引入表格中,使用非常靈活簡(jiǎn)便。由推出,靈活扎實(shí)的建議列表函數(shù)庫。 原文鏈接:前端插件庫站點(diǎn):前端開發(fā)文檔博客:前端插件庫 前端插件庫 DataTables 官網(wǎng):https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<