Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能(利用pdf.js/iframe/embed)
前言
最近在做一個(gè)精品課程,需要在線預(yù)覽課件ppt,我們的思路是將ppt轉(zhuǎn)換為pdf在線預(yù)覽,所以問題就是如何實(shí)現(xiàn)在線預(yù)覽pdf了。
在實(shí)現(xiàn)的過程中,為了更好地顯示效果,我采用了多種不同的方法,最終選擇效果最好的pdf.js。
實(shí)現(xiàn)方法:
1:iframe
采取iframe將pdf嵌入網(wǎng)頁從而達(dá)到預(yù)覽效果,想法很美好,實(shí)現(xiàn)很簡(jiǎn)單,但顯示很殘酷…
雖然一行代碼簡(jiǎn)潔明了,打開谷歌瀏覽器效果也還行,但缺點(diǎn)也是十分明顯的!?。?!
<iframe src="http......" width="100%"></iframe>
缺點(diǎn):
(1)不兼容IE,因?yàn)閕frame畢竟不規(guī)范,IE已經(jīng)不采用它了
(2)下載彈窗!!!每次打開預(yù)覽都彈出下載彈窗,用戶體驗(yàn)極度不好
2:embed
embed和iframe感覺差不多的東西,用起來感覺一樣簡(jiǎn)潔明了,打開IE效果也還行,但仍然無法避免下載彈窗的干擾。
<embed src="http......" width="100%" height="400" />
3:pdf.js(效果感覺最好)
實(shí)現(xiàn)步驟:
(1)下載pdf.js文件
因?yàn)閜df.js文件比較多,我們要用的只是核心文件,所以將核心文件抽出來(已處理跨域報(bào)錯(cuò))。點(diǎn)擊下載核心文件
(2)在static中引入核心文件
(3)使用
<template> <iframe :src="pathUrl" width="100%"></iframe> </template> <script> export default { data () { return { pathUrl:'' } }, mounted () { this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + encodeURIComponent('https://lidn02.o%BA.pdf') // 找到之前引進(jìn)來pdf文件中的的viewe.html并+pdf地址 }, } </script>
(4)效果
各大主流瀏覽器均兼容。
(5)以流的形式接收pdf
雖然上面已經(jīng)實(shí)現(xiàn)效果了,但打開控制臺(tái)還是有一行報(bào)錯(cuò):
為了解決這個(gè)問題,或者遇到跨域時(shí)都采用流的形式接受pdf文件,再進(jìn)行展示:
mounted(){ this.getData(你的pdf地址) } //接收文件流轉(zhuǎn)換地址再顯示 getData(url){ axios.get(url,{ responseType:'blob', }) .then(res => { let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}) let objectUrl = URL.createObjectURL(blob) this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + objectUrl }) .catch(err => { console.log(err) }) }
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能的文章就介紹到這了,更多相關(guān)Vue在線預(yù)覽pdf文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)
- vue使用pdf.js預(yù)覽pdf文件的方法
- vue插件開發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線預(yù)覽pdf文檔的方法
- vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測(cè)試)
- Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的步驟
- Vue使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能
- 使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能
- Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
相關(guān)文章
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue+animation實(shí)現(xiàn)翻頁動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue+animation實(shí)現(xiàn)翻頁動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解
這篇文章主要為大家介紹了一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08ant desing vue table 實(shí)現(xiàn)可伸縮列的完整例子
最近在使用ant-design-vue做表格時(shí),遇到要做一個(gè)可伸縮列表格的需求,在網(wǎng)上一直沒有找到好的方法,于是小編動(dòng)手自己寫個(gè)可以此功能,下面小編把a(bǔ)nt desing vue table 可伸縮列的實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考2021-05-05vue+axios?methods方法return取不到值問題及解決
這篇文章主要介紹了vue+axios?methods方法return取不到值問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)可視化世界地圖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05