测试onlyoffice在线预览文件功能

HTML示例代码

HTML 复制代码
<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <title>测试onlyoffice在线预览文件功能</title>
    <script type="text/javascript" src="http://onlyoffice服务器ip:端口/web-apps/apps/api/documents/api.js"></script>
    <style>
        html {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
 
<body class="full-screen">
    <div id="placeholder"></div>
 
    <script language="javascript" type="text/javascript">
        var docEditor = new DocsAPI.DocEditor("placeholder", {
 
            "document": {
                "fileType": "xlsx",
                "title": "xxx.xlsx",
                //地址必须文件服务器能访问到
                "url": "http://ip:端口/static/qms/xxx.xlsx" //文件地址
            },
            });
    </script>
</body>
<style type="text/css">
    .full-screen {
        height: 100%;
        overflow: hidden;
    }
</style>
 
</html>

注意事项

1、http://onlyoffice服务器ip:端口/web-apps/apps/api/documents/api.js能正常访问,访问结果如下

2、文件地址 必须是onlyoffice服务器可以访问到的地址

相关推荐
学习菌子1 天前
第9章:【系统架构设计师】软件工程(5.系统运行与评价)
系统架构·软件工程·软考高级·系统架构师·系统维护·系统转换·系统评价
一只码代码的章鱼11 天前
操作系统 第九章 部分
系统架构
还债大湿兄12 天前
《王者荣耀》系统架构深度技术解析
系统架构
池佳齐13 天前
【软考高级系统架构论文】论湖仓一体架构及其应用
架构·系统架构
池佳齐13 天前
【软考高级系统架构论文】论软件设计方法及其应用
系统架构
大数据张老师13 天前
自动化性能回退机制——蓝绿部署与灰度发布
运维·系统架构·自动化·ai架构
孟猛202313 天前
股票账户的管理和交易
系统架构
hwj运维之路14 天前
大数据系统架构实践(一):Zookeeper集群部署
大数据·zookeeper·系统架构
劳埃德福杰14 天前
【系统规划与管理师第二版】1.3 新一代信息技术及发展
系统架构·软件工程·设计规范
范纹杉想快点毕业14 天前
Qt实现文本编辑器光标高亮技术
java·开发语言·c++·算法·系统架构