ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では、Windows に付属の PDF を使用して顧客のニーズを満たすことは困難です。そのため、特殊な状況下で PDF ファイルのプレビューをサポートする別の方法が必要です。ここでは、pdf.js ファイルを導入する形式を使用して目的を達成します。 ステップ1: pdf.jsをダウンロードする pdf.js ファイルをインポートする アドレスは次のとおりです: http://mozilla.github.io/pdf.js/getting_started/ 2番目のステップはVueを導入することです ダウンロードしたファイルをpiblicのルートディレクトリに置きます ステップ3: 使用 メインのアドレスは「/build/generic/web/viewer.html?file="+href」です。ここで、href はリクエストバックエンドから返されたファイルパス、またはバックエンドから返されたファイルストリームをフロントエンドで解析した後に生成されたファイルパスです。先頭に /build/generic/web/viewer.html?file= が追加されます。アドレスは、導入した pdf.js ファイルのパスです。/build/generic/web/viewer.html を直接記述することもでき、直接検索に行きます。以下では、フロントエンド解析ファイル ストリームを使用してアドレス プレビューを生成します。 プレビューメソッド window.open("/build/generic/web/viewer.html?file="+href); アクシオス({ メソッド: 'get'、 url:url, ヘッダー: { 「トークン」:認証、 }, レスポンスタイプ: 'blob', }).then(応答 => { type_ = type_.toLowerCase(); (type_ == "docx") の場合 { that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document" } そうでない場合 (type_ == "doc") { that._type_ = "application/msword" } そうでない場合 (type_ == "gif") { that._type_ = "image/gif" } そうでない場合 (type_ == "jpeg" || type_ == "jpg") { that._type_ = "image/jpeg" } そうでない場合 (type_ == "png") { that._type_ = "image/png" } そうでない場合 (type_ == "pdf") { that._type_ = "アプリケーション/pdf" } そうでない場合 (type_ == "txt") { that._type_ = "text/plain;charset=utf-8'" } そうでない場合 (type_ == "xls") { that._type_ = "application/vnd.ms-excel" } そうでない場合 (type_ == "xlsx") { that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }そうでない場合 (type_ == "zip") { that._type_ = "application/zip" } そうでない場合 (type_ == "ppt") { that._type_ = "application/vnd.ms-powerpoint" } そうでない場合 (type_ == "pptx") { that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation" } if(type_ == "pdf"){ var blob = new Blob([response.data], { type: that._type_ }) var href = window.URL.createObjectURL(blob); //ダウンロード リンクを作成します window.open("/build/generic/web/viewer.html?file="+href); } }) やっと PDF ファイルのダウンロード、印刷、その他の機能を無効にしたい場合、最も簡単な方法は、インポートしたファイルで viewer.html を見つけることです。パスは、build の下の generic フォルダーの下の web フォルダーにある viewer.html です。 この HTML で対応するダウンロードされた DOM を見つけて、display:none を設定するだけです。コメントアウトしないでください。コメントアウトするとエラーが報告されます。下図のように、赤いボックスでは 1 つはダウンロード用、もう 1 つは印刷用なので、非表示にします。 これも安全ではないかと尋ねられた場合は、ページに表示しないようにクライアントと話し合うことができます。ページに表示されるものはすべてスクリーンショットでキャプチャされる可能性があり、それは必ず安全ではないからです。 これで、vue を使用して pdf.js で PDF をプレビューする方法についての記事は終わりです。vue を使用して pdf.js で PDF コンテンツをプレビューする方法の詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体
概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...
目次etcdの機能etcdが独自の高可用性クラスタを構築するには、主に3つの形式があります。今回構築...
ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...
目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...
序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...
エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...
クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...
King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...
目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...
システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...
コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...
目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...
tar バックアップ システム sudo tar cvpzf backup.tgz --exclud...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...