Webプロジェクトにpdfを統合する.jsのデフォルトビューア

2445 ワード

pdf.js MozillaオープンソースのHTML 5プラットフォームにpdfドキュメントを表示するための技術である、Mozilla独自のFirefoxブラウザでもpdfが使用する.jsがpdfをプレビューすると、比較的成熟した安定した案であることがわかります(btw、chromeはfoxitの技術を使っていますが、国人は誇りに思っています).もちろん似たような案はたくさんあり、多くはapiを豊富に提供しています.ドキュメント/apiをよく読むと、良い収穫があるかもしれませんが、Mozillaは同時にFirefox内のビューアもオープンソースにしています.ほとんどのカスタマイズ性が強くなく、閲覧する必要がある使用シーンでは、直接「持ってくる主義」ができるようです.この付属のviewerを直接使用する方法について説明します
前提として、HTML 5ベースのシナリオである以上、ブラウザの互換性は大きな問題であり、政府はできるだけ互換性を作っている(compatibility.jsファイル経由)が、依然としてIE 9以下のブラウザはサポートできない、詳しくはこれを参照、IE 9以下はサポートするか、シナリオを変えるか、サポートされていないままダウンロードリンクを表示するかのどちらかだろう.
1、ソースをダウンロード
git clone https://github.com/mozilla/pdf.js.git pdfjs

cd pdfjs


2、コンパイル
node環境が必要
node make generic


これにより、ルートディレクトリの下にbuildフォルダが生成されます.ディレクトリ構造:
/

    generic

        build

            pdf.js

            pdf.worker.js

        web

            ...


ここで、buildパスの下はメインプログラム、webパスの下はビューアプログラム
3、Webサイトの実行
node make server


また、自分の任意のWebサーバに公開することもできます.上記のコマンドで、現在のディレクトリpdfjsをルートとしてWebサイトをサーボすることができます.examplesの内容と、web(Mozillaのpdfビューア)の内容を確認することができます.
もちろん、前のセクションで生成されたgenericディレクトリの下に直接Webサイトをサーボすることもできます.これは簡単になります.要するに、ウェブサイトの配置が終わったら、私たちはwebパスの下のviewを見つけるだけです.html静的ファイルは、file=xxx.pdf形式のパラメータを入力します.たとえば、次のようにします.
http://myapp.mycompany.com/web/viewer.html?file=http://myapp.mycompany.com/my-PDF-file.pdf


(同局ファイル用相対パスはもちろん問題ありません)
4、配置パスの変更
もしあなたのプロジェクトの配置がgeneric/build&webではないならば(間違いなく多くはそうではありません)、あなたは・ファイルの中のpdf.jsのパスをあなたの本当のパスに変更する必要があります.
<script type="text/javascript" src="../build/pdf.js"></script>


そして・中の「pdf.worker.js’はあなたの本当の道でいいです.
PDFJS.workerSrc = '../build/pdf.worker.js';


参照:Integrating PDF.js as PDF viewer in your web application