diff --git a/frontend/config/webpack.entry.js b/frontend/config/webpack.entry.js
index 7d20199442..4c6b301a20 100644
--- a/frontend/config/webpack.entry.js
+++ b/frontend/config/webpack.entry.js
@@ -30,8 +30,9 @@ const entryFiles = {
   viewFileText: '/view-file-text.js',
   viewFileSdoc: '/view-file-sdoc.js',
   viewFileDocument: '/view-file-document.js',
-  viewFileOnlyoffice: '/view-file-onlyoffice.js',
   viewFileSpreadsheet: '/view-file-spreadsheet.js',
+  viewFileOnlyoffice: '/view-file-onlyoffice.js',
+  viewFileCollaboraOnline: '/view-file-collabora-online.js',
   settings: '/settings.js',
   repoHistory: '/repo-history.js',
   repoSnapshot: '/repo-snapshot.js',
diff --git a/frontend/src/view-file-collabora-online.js b/frontend/src/view-file-collabora-online.js
new file mode 100644
index 0000000000..2297b0ceb7
--- /dev/null
+++ b/frontend/src/view-file-collabora-online.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import FileView from './components/file-view/file-view';
+import FileViewTip from './components/file-view/file-view-tip';
+
+const {
+  err,
+  fileName,
+  actionURL,
+  accessToken,
+  accessTokenTtl,
+} = window.app.pageOptions;
+
+class ViewFileCollaboraOnline extends React.Component {
+  render() {
+    return (
+      <FileView content={<FileContent />} isOnlyofficeFile={true} />
+    );
+  }
+}
+
+class FileContent extends React.Component {
+
+  componentDidMount() {
+    if (!err) {
+      document.getElementById('office-form').submit();
+      document.getElementById('office-frame').className = 'd-block w-100 h-100 border-0';
+    }
+  }
+
+  render() {
+    if (err) {
+      return <FileViewTip />;
+    }
+
+    return (
+      <div className="file-view-content flex-1 p-0 border-0">
+        <iframe title={fileName} id="office-frame" name="office_frame" className="d-none" allowFullScreen></iframe>
+        <form id="office-form" name="office_form" target="office_frame" action={actionURL} method="post">
+          <input name="access_token" value={accessToken} type="hidden" />
+          <input name="access_token_ttl" value={accessTokenTtl} type="hidden" />
+        </form>
+      </div>
+    );
+  }
+}
+
+ReactDom.render(<ViewFileCollaboraOnline />, document.getElementById('wrapper'));
diff --git a/seahub/templates/wopi_file_view_react.html b/seahub/templates/wopi_file_view_react.html
new file mode 100644
index 0000000000..fac4e9eedc
--- /dev/null
+++ b/seahub/templates/wopi_file_view_react.html
@@ -0,0 +1,17 @@
+{% extends 'file_view_react.html' %}
+{% load render_bundle from webpack_loader %}
+{% load seahub_tags avatar_tags i18n static %}
+
+{% block extra_style %}
+{% render_bundle 'viewFileCollaboraOnline' 'css' %}
+{% endblock %}
+
+{% block extra_data %}
+actionURL: '{{action_url}}',
+accessToken: '{{access_token}}',
+accessTokenTtl: '{{access_token_ttl}}',
+{% endblock %}
+
+{% block render_bundle %}
+{% render_bundle 'viewFileCollaboraOnline' 'js' %}
+{% endblock %}
diff --git a/seahub/views/file.py b/seahub/views/file.py
index 78dbf24549..9e398943ed 100644
--- a/seahub/views/file.py
+++ b/seahub/views/file.py
@@ -835,7 +835,7 @@ def view_lib_file(request, repo_id, path):
 
             if wopi_dict:
                 send_file_access_msg(request, repo, path, 'web')
-                return render(request, 'view_file_wopi.html', wopi_dict)
+                return render(request, 'wopi_file_view_react.html', {**return_dict, **wopi_dict})
             else:
                 return_dict['err'] = _('Error when prepare Office Online file preview page.')