H5 で PDF をオンラインでプレビューする方法-H5 チュートリアル-php.cn

H5 で PDF をオンラインでプレビューする方法

php中世界最好的语言

リリース： 2018-03-27 11:32:18

オリジナル

10694 人が閲覧しました

今回は、H5 で PDF をオンラインでプレビューする方法を説明します。H5 で PDF をオンラインでプレビューするための注意事項は何ですか。実際のケースを見てみましょう。

はじめに

PDF.js は、HTML5 で構築されたポータブルな

Document Format (PDF) ビューアです。

PDF.js はコミュニティ主導で、Mozilla Labs によってサポートされている汎用のツールを作成することです。 PDF の解析とレンダリングのための Web 標準ベースのプラットフォームです。

オープンソースのアドレス:

https://github.com/mozilla/pdf.js

ダウンロード後は直接使用できないため、再構築する必要があります。慣れていないので、非常に面倒です

ビルドされたパッケージ: build_jb51.rar

Example

Quoteファイル、以下をコピーして直接使用してください

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>课程详情</title>
    <style type="text/css">
    </style>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/plugins/pdfjs/pdf.js"></script>
    <script src="~/Scripts/plugins/pdfjs/pdf.worker.js"></script>
    <script type="text/javascript">
        var var_filepath = decodeURIComponent("@filepath");//不能跨域
        var var_win_height = $(window).height();
        $(document).ready(function () {
            resetPlayerSize(); 
        });
        $(window).resize(function () {
            resetPlayerSize();
        });
        function resetPlayerSize() {
            var_win_height = $(window).height();
            $(".tmPlayer").css({ "height": var_win_height + "px" });
        } 
    </script>
</head>
<body style="margin: 0;overflow: hidden"> 
    <p id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"></p>
    <script type="text/javascript">
        $('.tmPlayer').html('<iframe frameBorder="0" scrolling="no" src="/Scripts/plugins/pdfjs/generic/web/viewer.html?file=&#39; +
            var_filepath +
            &#39;" style="width:100%; height:100%;"></iframe>');
    </script>
</body>
</html>

ログイン後にコピー

事例を読んだ後、あなたは方法をマスターしたと思いますこの記事では、さらに興味深い情報については、php 中国語 Web サイトの記事の他の関連トピックに注目してください。

推奨読書:

H5のドラッグアンドドロップの詳しい説明

H5ページでAPPを呼び出す方法

以上がH5 で PDF をオンラインでプレビューする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。