embed を使用)

序文

現在、私はコースウェア PPT のオンラインプレビューを必要とする高品質のコースに取り組んでいます。私たちのアイデアは、オンラインプレビュー用に PPT を PDF に変換することです。そのため、PDF のオンラインプレビューを実現する方法が問題となります。

実装の過程では、効果をより良く見せるためにさまざまな方法を試し、最終的に最も効果があった pdf.js を選択しました。

実施方法：

1: インラインフレーム

プレビュー効果を実現するために、iframe を使用して PDF を Web ページに埋め込みます。アイデアは優れており、実装も簡単ですが、表示が残酷です...

1 行のコードは簡潔で明確であり、Google Chrome を開いたときの効果は問題ありませんが、欠点も非常に明白です。！！！

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

欠点:

（１）iframeは標準化されておらず、IEではもう使われていないため、IEと互換性がない

（２）ポップアップウィンドウをダウンロード！！！プレビューを開くたびにダウンロードポップアップウィンドウがポップアップ表示され、ユーザーエクスペリエンスが非常に悪くなります。

2: 埋め込む

Embed と iframe は似たような感じがします。使い方は同様にシンプルで明確で、IE を開いたときの効果も良好ですが、ダウンロードポップアップウィンドウの干渉は避けられません。

 <埋め込み src="http......" 幅="100%" 高さ="400" />

3: pdf.js (効果が最高)

実装手順:

（1）pdf.jsファイルをダウンロードする

pdf.js ファイルは多数あるため、コアファイルのみを使用すればよいため、コアファイルを抽出します (クロスドメインエラーは処理されています)。クリックしてコアファイルをダウンロード

（２）コアファイルを静的にインポートする

（３）使用

<テンプレート>
	<iframe :src="pathUrl" width="100%"></iframe>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
	データ （） {
	   戻る {
	     パスURL:''
	   }
	 },
	 マウントされた（）{
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + encodeURIComponent('https://lidn02.o%BA.pdf') // 前に紹介した pdf ファイル内の viewe.html を見つけて、+ pdf アドレスを取得します},
 }
</スクリプト>

（4）エフェクトはすべての主要ブラウザと互換性があります。

（５）PDFをストリームとして受信する

上記の効果は達成されましたが、コンソールを開くとエラーラインがまだ表示されます。

この問題を解決するために、またはクロスドメインに遭遇したときに、PDF ファイルはストリームの形式で受信され、表示されます。

マウントされた(){
	this.getData(PDF アドレス)
}

//ファイルストリームを受信し、アドレスを変換して表示します getData(url){
  axios.get(url,{
    レスポンスタイプ:'blob',
  })
    .then(res => {
      blob = new Blob([res.data], {type: "application/vnd.ms-excel"}) とします。
      objectUrl = URL.createObjectURL(blob) とします。
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + オブジェクト URL
    })
    .catch(エラー => {
      コンソール.log(エラー)
    })
}

要約する

Vue の PDF ファイルのオンラインプレビューに関するこの記事はこれで終わりです。Vue の PDF ファイルのオンラインプレビューに関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: