OnlyOffice 文件预览 HTML5 简单使用

avatar 2022年02月15日10:02:33 6 1136 views
博主分享免费Java教学视频,B站账号:Java刘哥

直接上代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文件预览</title>
    <script type="text/javascript" src="http://192.168.0.121:10001/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>
    <div id="placeholder" class="nav" style="width: 100%; height: 100%"></div>
    <script language="javascript" type="text/javascript">
		let fileType = 'docx'; // 文件类型
		let key = 'xxxxxxx22z'; // 随机数,这个会缓存
		let tilte = '222.docx'; // 文件标题
		let url = 'http://域名/bis-svn/commonfile/svn/fileReview?fileId=31957’; // 文件URL,返回文件流
		let documentType = 'text';  // 文档类型
		var config = {
                "document": {
                    "fileType": fileType,
                    "key": key,
                    "title": tilte,
                    "url": url,
                    "permissions": {
                        "edit": false
                    },
                },
                "documentType": documentType,
                "editorConfig": {
                    "customization": {
                        "forcesave": "true"
                    },
                    "user": {
                        "id": "78ele1",
                        "name": "CMMI User"
                    },
                    "lang": "zh-CN",
                },
                "height": "100%",
                "width": "100%"
            };
		var docEditor = new DocsAPI.DocEditor("placeholder", config);
    </script>
 </body>
</html>

注意文件URL可以为 /xxx.jpg 这种图片,也可以为 /xxx 这种返回文件流的

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0