zoukankan      html  css  js  c++  java
  • 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

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

    构建好的程序包:http://cnblogs.com/files/xiangliuyunyang/build.zip

    如果你想自己动手,看看这篇http://blog.csdn.net/hyhbyl/article/details/20994945

    示例

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

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

    参考:http://www.cnblogs.com/xiangliuyunyang/p/5956453.html

  • 相关阅读:
    Satellite Basics
    Antenna basics
    Installing a Sailor 900 VSAT
    Installing Intellian VSAT
    IPTV、DVB、OTT的区别
    STM32两种下载方式
    Postman 使用指南
    elasticsearch term 查询之一
    Elasticsearch -from + size设置
    TIMESTAMP和DATETIME的区别
  • 原文地址:https://www.cnblogs.com/xcsn/p/7104819.html
Copyright © 2011-2022 走看看