Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

序文

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

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

実施方法:

1: インラインフレーム

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

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

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

欠点:

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

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

2: 埋め込む

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

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

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

実装手順:

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

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

(2)コアファイルを静的にインポートする

(3)使用

<テンプレート>
	<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)エフェクトはすべての主要ブラウザと互換性があります。

(5)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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は PDF ファイルのオンライン プレビューとダウンロードを実装します (pdf.js)
  • Vue は PDF ドキュメントのオンライン プレビュー機能を実装しました
  • Vue プラグイン開発: pdf.js を使用してモバイル フォンで PDF ドキュメントのオンライン プレビューを実現する方法
  • Office ファイルのオンライン プレビュー用の Vue サンプル コード
  • vue vue-pdf を使用して PDF オンライン プレビューを実装するためのサンプル コード
  • Vue-pdfはPDFファイルのオンラインプレビューを実装します
  • vue-pdf はオンラインファイルプレビューを実現します
  • Vue プロジェクトでよく使用される 3 つのファイル タイプ (pdf/word/excel テーブル) のオンライン プレビュー

<<:  Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策

>>:  Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法

推薦する

Element UI で自動サイズ調整テキストエリアの高さを設定する方法

Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...

nginx のロードバランシングとリバースプロキシの説明

目次負荷分散負荷分散分類1. DNS 負荷分散2. IP負荷分散3. リンク層の負荷分散4. ハイブ...

MySQL インデックス最適化の説明

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...

MySql ビュー、トリガー、ストアド プロシージャに関する簡単な説明

ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...

HTMLフォーム要素の詳しい解説(パート1)

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML フォー...

insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する

この記事はmysqlデータベースです質問 1 表 1 のデータを表 2 にインポートします。表 1 ...

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

jsを使用して動的な背景を実現する

この記事の例では、動的な背景を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...

nginx を https をサポートするように設定するためのサンプル コード

1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

JS の効率的なマジック演算子の概要

JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...

vue-resource インターセプターの使用に関する詳細な説明

序文インターセプター最近のフロントエンド フレームワークでは、インターセプターは基本的に非常に基本的...