安卓、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  浪涛飞  阅读(677)  评论(0)    收藏  举报
编辑推荐:
· 在 .NET 中使用内存映射文件构建高性能的进程间通信队列
· 一个 java 空指针异常的解决过程
· 揭开 SQL Server 和 PostgreSQL 填充因子的神秘面纱
· 没有调度器的协程不是好协程,零基础深入浅出 C++20 协程
· 别做抢活的导演:代码中的抽象层次原则
阅读排行:
· 今年失业的程序员兄弟姐妹们,你们都去干什么了?
· TinyEditor v4.0 alpha 版本发布:表格更强大,表情更丰富,上传体验超乎想象!
· .NET周刊【7月第2期 2025-07-13】
· 圆方树学习笔记 —— 一种关于点双连通分量的思考方式
· MySQL 17 如何正确地显示随机消息?
点击右上角即可分享
微信分享提示