• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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"> 
        <div id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"></div>
    
        <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>
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    上一篇:HTML5 拖放(Drag 和 Drop)详解与实例代码
    下一篇:html5如何在Canvas中实现自定义路径动画示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5在线预览PDF的示例代码 HTML5,在线,预览,PDF,的,示例,