ホームページ > バックエンド開発 > PHPチュートリアル > pdfjsの使い方チュートリアル

pdfjsの使い方チュートリアル

WBOY
リリース: 2016-07-29 09:15:15
オリジナル
2415 人が閲覧しました

pdf.js フレームワークの魅力は、HTML5 用に実装されており、ローカル サポートを必要とせず、ブラウザーとの互換性が比較的高いことです。要件は 1 つだけです。ブラウザーが HTML5 をサポートしている限りです。 (ただし、IE のそれより低いバージョンについては、お悔やみの言葉しか言えません!)

私のローカル環境は IE11 なので、IE9 以上がOKと言われているので、IE11 でのみテストしましたが、合格しました (もちろん Firefox、 360、私もテストしましたが、問題ありませんでした)。

プロジェクト開発の必要性から、PDF はオンラインで表示され、IE と互換性がある必要があるため、pdf.js を選択しました。しかし、オンラインでそれを実行するのに 1 日かかりました。戻る、それは私が期待していたものとは違った、それはとても難しいので、皆さんの参考のためにブログを書くことにしました!

以下は pdf.js に関連する URL です:

GitHub: https://Github.com/mozilla/pdf.js/

上記の URL には pdf.js の基本的な概要が記載されています、ソースコードを入手してビルドする方法!

しかし、彼は次を使用します:

$ Git clone Git://Github.com/mozilla/pdf.js.Git

Build using:

$ node make generic

私は使いませんWindows 7 で Git とノードを使用する方法がわからない (それについて何か知っている場合は、教えてください。ありがとう!) ので、ビルドのために Linux に切り替えました (この間、多くの悲しい経験がありました) 、でも大丈夫だと思います) 映画化されました!! たとえば、Gitを使用してソースコードを取得すると、システムはGitがインストールされていないことを通知しました。 ShellJS がインストールされていないため、npm を使用するように言われました。私は npm をインストールしませんでした...)、実際には pdf.js を使用しており、最終的にはビルドされたコンテンツのみが必要です。ここ:

--------------- -----------------------------分割線-- ----------------- -----------------------

無料ダウンロードのアドレスは http: //linux.linuxidc.com/

ユーザー名とパスワードは両方とも www.linuxidc .com

具体的なダウンロードディレクトリは/2015 information/ June/12th/pdf.js使い方チュートリアル/

ダウンロード方法についてhttp://www.linuxidc.com/Linux/2013-07/87684 をご覧ください。 -------------------区切り線--- ------------------------ -------------

構築後のディレクトリ構造は次のとおりです:

構築されたビルド コンテンツを使用して、簡単なテストを実行し、ジェネリックを Tomcat の Web アプリにコピーできます

pdfjsの使い方チュートリアルpdfjs<strong></strong>Tomcat を起動したら、次の手順を実行できます。 : </p><p>http://localhost:8080/generic/web/viewer.html</p> <p> ぜひアクセスしてください!非常に見栄えの良いインターフェイスが表示されます: </p><p><img src=pdfjs<strong></strong>generic/web/viewer.html は主に PDF リーダーのスタイルをレンダリングし、generic/web/viewer.js は開かれた PDF ファイルを指定します (もちろん他の関数もありますが、これらは私たちが扱うものではありません)気にしてください)、generic/web/viewer.js にあるコードを見てみましょう: </p><p><img src=pdfjs<strong></strong>デフォルトで generic/web/compressed.tracemonkey-pldi-09.pdf ファイルを開くことがわかります。次のコードを見てみましょう。 : </p><p> <img src=pdfjs<strong></strong>これは、 file パラメーターを渡すことで、開いている PDF ファイルを動的に指定できることを示しています。例: </p><p>http://localhost:8080/generic/web/viewer.html?file=qbs.pdf</p><p>それでは具体的な組み込みプロジェクトでの使い方を紹介していきます! </p><p>コンテンツをサードパーティのプラグインとして汎用的に使用し、次のようにプロジェクトに保存できます: </p><p><img src=pdfjs<strong></strong>その後、ページは <iframe> タグを使用して PDF をロードできます</p><p><iframe src=?file=" width="100%" style="max-width:90%">

レンダリングは次のとおりです:

pdfjsの使い方チュートリアルpdfjs<strong></strong> 本質は、generic/web/viewer.html に直接アクセスし、そのファイル パラメーターを指定して、開く PDF ファイルを指定することです。上で使用したスト​​リームメソッドを指定します。 </p><p>上記は単純な使用方法です。ここではより複雑な使用方法を示します: </p><p>次の URL リクエストを試したかどうかはわかりません: </p><p>http://localhost:8080/akane/resources/plugin/pdfJs/generic/web/viewer.html?file=/akane/displayPDF.do?id=966c6f0e-3c06-4154-aafd-afdbee5bcb65</p><p>実際にはアプリケーションでは、さまざまなパラメータに基づいてさまざまな PDF ファイルが選択されて表示されることがあります。このとき、上記の URL アドレスを注意深く観察すると、ファイル リクエスト パラメータの値が次のようになっていることがわかります。 URL アドレス。この URL アドレスには独自のリクエスト パラメーターが追加されているため、URL アドレスに 2 つの「?」が表示され、ブラウザーがこの URL を正常に解析できなくなります。 </p><p> 1 つの解決策は、最初にファイル パラメータの値をエンコードし、次にそれをデコードしてこの問題を解決することができます。 </p><p>この時点で、encodeURIComponent() 関数を表示するように要求できます。これは </p>js 関数<p> であるため、以下に示すように、Document Ready 関数で iframe の src 値を動的に設定する必要があります: <strong></strong><%@ page c/html;charset=GBK



/div>

エンコードがあるため、それを解析するにはデコードが必要です。以下に示すように、generic/web/viewer.js がこれをすでに行っています。 http://image.codes51.com/Article/image/20150916/20150916110517_9296.png" alt="pdfjsの使い方チュートリアル" width="581" vspace="5">

この時点で、PDF の導入.js プラグインが終了しました 初めてブログを書きます

間違いがあれば、アドバイスをいただければ幸いです

pdf の作者の 2 人に感謝します。 .js (私はこれらの外国の巨匠を本当に尊敬します。2 人でそれができます! こんなに優れたフレームワークを作成し、それはオープンソースです!) pdfjs<strong></strong></p>この記事のリンク アドレスは永続的に更新されます<p>: http://www.linuxidc .com/Linux/2015-06/118728.htm<strong>
                
                
                <strong>
                    以上、さまざまな側面を含めた pdfjs の使い方チュートリアルを紹介しましたが、PHP チュートリアルに興味のある友人の参考になれば幸いです。 </strong>
                </strong>
                    </p>

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート