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カーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法

推薦する

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

Linux で ss コマンドと zabbix を組み合わせてソケットを監視する方法の詳細な説明

目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...

Vue Notepadの例の詳細な説明

この記事の例では、メモ帳機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的...

ドロップダウンメニュー効果を実現するJavaScript

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...

vue keepAlive キャッシュクリア問題事例の詳細な説明

Keepalive は Vue プロジェクトでのキャッシュによく使用され、基本的な要件を満たすのに非...

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...

MySQL の時間タイプとモードの詳細

目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...

ネイティブJSを使用した遅延読み込みlazyLoadの3つの方法の概要

目次序文方法1: 高コントラスト方法2: getBoundingClientRect() APIを使...

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

シンプルな CSS テキストアニメーション効果

成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...

MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。

table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...

MySQL監視グループレプリケーションについて簡単に説明します

元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

haslaylout と bfc 解析の理解

1. haslayout と bfc は IE 固有の標準属性です。 2. BFC はページ上の分離...