Vue實現在線預覽pdf文件功能（利用pdf.js/iframe/embed）

Posted on by

前言

最近在做一個精品課程，需要在線預覽課件ppt，我們的思路是將ppt轉換為pdf在線預覽，所以問題就是如何實現在線預覽pdf瞭。

在實現的過程中，為瞭更好地顯示效果，我采用瞭多種不同的方法，最終選擇效果最好的pdf.js。

實現方法：

1：iframe

采取iframe將pdf嵌入網頁從而達到預覽效果，想法很美好，實現很簡單，但顯示很殘酷…

雖然一行代碼簡潔明瞭，打開谷歌瀏覽器效果也還行，但缺點也是十分明顯的！！！！

<iframe src="http......" width="100%"></iframe>

缺點：

（1）不兼容IE，因為iframe畢竟不規范，IE已經不采用它瞭

（2）下載彈窗！！！每次打開預覽都彈出下載彈窗，用戶體驗極度不好

2：embed

embed和iframe感覺差不多的東西，用起來感覺一樣簡潔明瞭，打開IE效果也還行，但仍然無法避免下載彈窗的幹擾。

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

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

實現步驟：

（1）下載pdf.js文件

因為pdf.js文件比較多，我們要用的隻是核心文件，所以將核心文件抽出來（已處理跨域報錯）。點擊下載核心文件

（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')   // 找到之前引進來pdf文件中的的viewe.html並+pdf地址
    },
 }
</script>

（4）效果
各大主流瀏覽器均兼容。

（5）以流的形式接收pdf

雖然上面已經實現效果瞭，但打開控制臺還是有一行報錯：

為瞭解決這個問題，或者遇到跨域時都采用流的形式接受pdf文件，再進行展示：

mounted(){
	this.getData(你的pdf地址)
}

//接收文件流轉換地址再顯示
 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)
    })
}

總結

到此這篇關於Vue實現在線預覽pdf文件功能的文章就介紹到這瞭,更多相關Vue在線預覽pdf文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：