测试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服务器可以访问到的地址

相关推荐
我喜欢就喜欢4 小时前
豆包赋能抖音生态:从内容创作到运营提效的全景应用
人工智能·系统架构
dishugj6 小时前
https://blog.csdn.net/dishugj/article/details/162068579
数据库·系统架构
希赛网6 小时前
2026下半年系统架构设计师考前20问
系统架构·软考高级·系统架构设计师·软考高级架构师·软考高级系统架构设计师
辛迪聊物业数字化7 小时前
中小物业SaaS系统架构设计:从收费、巡检到IoT对接的落地实践
物联网·系统架构
各类产品分享8 小时前
工厂 AR 巡检系统架构设计与落地难点解析
系统架构·ar·ar巡检
我喜欢就喜欢9 小时前
DeepSeek 大模型多场景落地应用指南
人工智能·系统架构
坐看风云变幻10 小时前
《系统架构师成长之路》第 3 期|计算机网络:TCP 三次握手与可靠传输
tcp/ip·计算机网络·系统架构
YuanDaima204810 小时前
系统架构与数据库理论基础:PostgreSQL 与 pgvector
数据库·人工智能·docker·postgresql·系统架构·产品经理
KEYSTONE_lucy1 天前
跨境供应链技术方案:海外仓维修系统架构与海外仓翻新再售流程解析
系统架构