测试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 小时前
View绘制流程学习--获取WindowManager的三种方式
android·系统架构·view design
沫璃染墨1 天前
《从零入门Linux系统篇(五十六):线程篇·九——生产者消费者模型:从条件变量到BlockingQueue实现》
linux·服务器·c++·驱动开发·设计模式·架构·系统架构
艺杯羹1 天前
Anthropic突袭发布Claude Code Mods!用TypeScript编写智能体中间件:告别AI误删与失控
人工智能·typescript·系统架构
沫璃染墨2 天前
《从零入门Linux系统篇(五十四):线程篇·七——互斥锁底层原理:从原子交换到线程竞争与锁实现》
linux·运维·服务器·开发语言·c++·驱动开发·系统架构
诚心呈意共享外卖配送系统2 天前
共享骑手与聚合配送的区别及系统架构设计:运力池与订单聚合如何落地
架构·系统架构·创业创新
风123456789~2 天前
【架构设计】第17章 通信系统架构设计 2/2
系统架构
诚心呈意共享外卖配送系统3 天前
众包配送调度系统选什么?聊聊派单、抢单、合单与结算的技术设计
架构·系统架构·创业创新
abigalexy3 天前
图解AI应用架构设计
人工智能·ai·架构·系统架构·aigc
沫璃染墨3 天前
《从零入门Linux系统篇(五十三):线程篇·六——线程互斥详解:从并发问题到mutex互斥锁》
linux·运维·服务器·开发语言·后端·架构·系统架构
励志不掉头发的内向程序员3 天前
【从零写一个CAD 04】中键拖动平移:抓住一个点,让它一直待在鼠标底下
开发语言·c++·qt·学习·系统架构·计算机外设