快捷導(dǎo)航

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來(lái)實(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)頁(yè)從而達(dá)到預(yù)覽效果，想法很美好，實(shí)現(xiàn)很簡(jiǎn)單，但顯示很殘酷…

雖然一行代碼簡(jiǎn)潔明了，打開谷歌瀏覽器效果也還行，但缺點(diǎn)也是十分明顯的?。。。?/p>

<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感覺差不多的東西，用起來(lái)感覺一樣簡(jiǎn)潔明了，打開IE效果也還行，但仍然無(wú)法避免下載彈窗的干擾。

 <embed src="http......" width="100%" height="400" />

3：pdf.js（效果感覺最好）

實(shí)現(xiàn)步驟：

（1）下載pdf.js文件

因?yàn)閜df.js文件比較多，我們要用的只是核心文件，所以將核心文件抽出來(lái)（已處理跨域報(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)來(lái)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)
    })
}