序文現在、私はコースウェア 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策
>>: Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法
MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...
目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...
この記事の例では、メモ帳機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的...
参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...
Keepalive は Vue プロジェクトでのキャッシュによく使用され、基本的な要件を満たすのに非...
ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...
目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...
目次序文方法1: 高コントラスト方法2: getBoundingClientRect() APIを使...
metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...
MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...
成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...
table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...
元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...
地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...
1. haslayout と bfc は IE 固有の標準属性です。 2. BFC はページ上の分離...