ホームページ >ウェブフロントエンド >htmlチュートリアル >H5 を使用して PDF 形式のドキュメントをプレビューする方法

H5 を使用して PDF 形式のドキュメントをプレビューする方法

php中世界最好的语言オリジナル: 2018-01-19 09:23:465255ブラウズ

今回は、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">
    <div id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"></div>
 
    <script type="text/javascript">
        $(&#39;.tmPlayer&#39;).html(&#39;<iframe frameBorder="0" scrolling="no" src="/Scripts/plugins/pdfjs/generic/web/viewer.html?file=&#39; +
            var_filepath +
            &#39;" style="width:100%; height:100%;"></iframe>&#39;);
    </script>
 
</body>
</html>

これらのケースを読んだ後、あなたは方法をマスターしたと思います. さらにエキサイティングな内容については、php 中国語 Web サイトの記事の他の関連トピックに注目してください。

H5 を使用して PDF 形式のドキュメントをプレビューする方法

関連記事