OnlyOffice 文件预览 HTML5 简单使用

言曌 2022年02月15日10:02:33 6 2663 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 这种返回文件流的