在HTML5在线预览PDF格式的代码

时间2024-01-23 12:44:27发布访客分类HTML浏览609

导读：收集整理的这篇文章主要介绍了在HTML5在线预览PDF格式的代码，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章主要介绍了HTML5在线预览PDF的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看...

收集整理的这篇文章主要介绍了在HTML5在线预览PDF格式的代码，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章主要介绍了HTML5在线预览PDF的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

简介

PDF.js is a Portable Document Format (PDF) viewer that is built wITh HTML5.

PDF.js is commUnity-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs.

开源地址：https://github.COM/mozilla/pdf.js

下载后不能直接使用，需要重新构建，不熟悉将会非常麻烦

构建好的程序包：build_jb51.rar

示例

引用文件，直接复制下文可以直接使用

!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=' +            var_filepath +            '" style="width:100%;
     height:100%;
    ">
    /iframe>
    ');
        /script>
    /body>
    /html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！