安卓、ios 'ppt', 'doc', 'word', 'excel', 'pptx', 'docx', 'wordx', 'excelx','pdf','txt' 文件预览html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预览</title>
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div id="content">

    </div>
    <!-- 定义预览模板 -->
    <script id="file-template" type="text/x-handlebars-template">
        <div class='tpl'>
            <!-- https://kewenkkk.oss-cn-hangzhou.aliyuncs.com/java%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83.pdf -->
            {{#if pdf}}
                <object data="{{url}}" type="application/pdf" width="100%" height="1000px">
                      <iframe src="{{url}}" width="100%" height="1000px" style="border: none;"></iframe>
                </object>
            {{/if}}

            {{#if doc}}
            <!-- https://kewenkkk.oss-cn-hangzhou.aliyuncs.com/2462980897717092360-2464292220556017669%E6%96%B0%E5%BB%BA%20XLSX%20%E5%B7%A5%E4%BD%9C%E8%A1%A8.xlsx -->
                <iframe src='https://view.officeapps.live.com/op/view.aspx?src={{url}}' width='100%' height='1000px' frameborder='1'>
                </iframe>
            {{/if}}
            <!-- https://kewenkkk.oss-cn-hangzhou.aliyuncs.com/2462980897717092360-2465201575325335560%E5%8D%95%E8%AF%8D.txt -->
            {{#if txt}}
                <iframe src='{{url}}' width='100%' height='1000px' frameborder='1'>
                </iframe> 
            {{/if}}
        </div>
    </script>

    <script>

        (function drawing() {
            //获得请求url 
            var reurl = window.location.href;
            if (reurl.indexOf('?') != -1) {
                var param = reurl.substring(reurl.indexOf('?') + 1);
                if (param != undefined && param != null) {

                    var suffix = param.substring(param.indexOf('.') + 1);

                    //定义展示文件列表
                    var docs = ['ppt', 'doc', 'word', 'excel', 'pptx', 'docx', 'wordx', 'excelx'];

                    var content = {
                        "pdf": 0,
                        "doc": 0,
                        "txt": 0,
                        "url": ''
                    };

                    if ($.inArray(suffix, docs) != -1) {
                        content.doc = '1';
                    }

                    if (suffix === 'txt') {
                        content.txt = '1';
                    }

                    if (suffix === 'pdf') {
                        content.pdf = '1';
                    }

                    content.url = param;
                    var source = $("#file-template").html();
                    var template = Handlebars.compile(source);
                    $('#content').html(template(content));
                }
            }
        })();

    </script>

</body>

</html>

把该html存储在安卓、ios 安装包中,使用时传入对应的文件url
示例:file:///E:/code/code/pdf.html?https://kewenkkk.oss-cn-hangzhou.aliyuncs.com/2462980897717092360-2464292220556017669%E6%96%B0%E5%BB%BA%20XLSX%20%E5%B7%A5%E4%BD%9C%E8%A1%A8.xlsx

 

posted @ 2020-02-29 21:03  浪涛飞  阅读(521)  评论(0编辑  收藏  举报