Vueはオンラインプレビューpdfファイル機能を実現する（pdf.js/iframe/embedを利用する）

前言
最近逸品の課程をしていますが、オンラインプレビューの授業pptが必要です。pptをpdfオンラインプレビューに変換するという考えです。だから、問題はどのようにオンラインプレビューのpdfを実現しますか？
実现する过程で、効果をよりよく表示するために、様々な方法を采用して、最终的に効果の最も良いpdf.jsを选びました。
実現方法：
1:iframe
iframeを採用してpdfをホームページに埋め込んでプレビュー効果を達成します。素晴らしいアイデアで、実現は簡単ですが、表示は残酷です。
一行のコードは簡潔明瞭で、Googleのブラウザを開けてもいいですが、欠点も非常に明らかです！！！！

<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ファイルの内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。