欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能(利用pdf.js/iframe/embed)

 更新時(shí)間:2021年06月02日 14:45:25   作者:小孬種  
項(xiàng)目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久,發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來實(shí)現(xiàn)的,需要的朋友可以參考下

前言

最近在做一個(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue開發(fā)拖拽進(jìn)度條滑動(dòng)組件

    vue開發(fā)拖拽進(jìn)度條滑動(dòng)組件

    這篇文章主要為大家詳細(xì)介紹了vue開發(fā)拖拽進(jìn)度條滑動(dòng)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能

    vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue+animation實(shí)現(xiàn)翻頁動(dòng)畫

    vue+animation實(shí)現(xiàn)翻頁動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了vue+animation實(shí)現(xiàn)翻頁動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • VUE3頁面div如何點(diǎn)擊改變樣式

    VUE3頁面div如何點(diǎn)擊改變樣式

    這篇文章主要介紹了VUE3頁面div如何點(diǎn)擊改變樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問題解決

    vue3與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使用詳解

    這篇文章主要為大家介紹了一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • ant desing vue table 實(shí)現(xiàn)可伸縮列的完整例子

    ant 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-05
  • vue+axios?methods方法return取不到值問題及解決

    vue+axios?methods方法return取不到值問題及解決

    這篇文章主要介紹了vue+axios?methods方法return取不到值問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue兼容ie9的問題全面解決方案

    Vue兼容ie9的問題全面解決方案

    這篇文章主要介紹了Vue兼容ie9的問題全面解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例

    Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例

    這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)可視化世界地圖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05

最新評(píng)論