pdf.js を使用して Vue で PDF ファイルをプレビューする方法

pdf.js を使用して Vue で PDF ファイルをプレビューする方法

ページ上で 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で HTML ページから高解像度の PDF ファイルを生成する方法
  • Vue で pdfjs を使用して PDF ファイルをプレビューする方法
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • Vue での携帯電話番号とメールの定期検証と 60 秒で検証コードを送信する例
  • VueはPDFファイルをメールボックスに送信するサンプルコードを実装します

<<:  MySQL の「特殊キーが長すぎます」の解決策

>>:  パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体

推薦する

21 の MySQL 標準化および最適化のベスト プラクティス!

序文良い習慣はすべて宝物です。この記事は、SQL の後悔の治療法、SQL パフォーマンスの最適化、S...

Linux 型バージョン メモリ ディスク クエリ コマンド紹介

1. まず、Linux システムのバージョン内容について概要を説明します。 1. カーネルバージョン...

Centos ベースイメージの作成方法

序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...

MySQLトリガーの簡単な使用例

この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...

Linux環境でグラフデータベースneo4jを構築する方法の説明

Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

Vueプロジェクトの最適化とパッケージ化の詳細な説明

目次序文1. ルーティングの遅延読み込み1. ルートの遅延読み込みが必要なのはなぜですか? 2. ル...

Windows 7 で Python 3.4 を使って MySQL データベースを使用する

Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...

MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する

序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...

ウェブページを自動更新するための 3 つのコード

実際、この効果を実現するのは非常に簡単で、この効果は特殊効果と呼ぶことすらできません。次のコードを ...

iFrameは背景を覆うポップアップレイヤーとして使うのに最適です

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法

これは主に、場所パラメータのif判断の設定ジャンプです。迂回により、サーバーの負荷と圧力を軽減できま...

eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...

JS でモバイルのインタラクティブ エクスペリエンスを向上させる方法

目次1. 即時フィードバック1.1 ボタンからの即時フィードバック1.2 継続的なフィードバック1....