H5怎么实现在线预览PDF

时间2024-01-23 08:38:43发布访客分类HTML浏览638

导读：收集整理的这篇文章主要介绍了H5怎么实现在线预览PDF，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎么实现在线预览PDF，H5实现在线预览PDF的注意事项有哪些，下面就是实战案例，一起来看一下。简介PDF.js is...

收集整理的这篇文章主要介绍了H5怎么实现在线预览PDF，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎么实现在线预览PDF，H5实现在线预览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>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！