序文現在、私はコースウェア 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カーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法
Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...
目次負荷分散負荷分散分類1. DNS 負荷分散2. IP負荷分散3. リンク層の負荷分散4. ハイブ...
日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...
目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...
ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML フォー...
この記事はmysqlデータベースです質問 1 表 1 のデータを表 2 にインポートします。表 1 ...
最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...
この記事の例では、動的な背景を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...
1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...
mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...
目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...
現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...
JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...
序文インターセプター最近のフロントエンド フレームワークでは、インターセプターは基本的に非常に基本的...