index.ejs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- https://blog.csdn.net/m0_68274698/article/details/123642018 -->
<!-- https://forum.onlyoffice.com/t/cannot-get-hosting-wopi-word-edit/2165/3 -->
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>ONLYOFFICE Document Editors</title>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
-ms-content-zooming: none;
}
#office_frame {
width: 100%;
height: 500px;
position: absolute;
top: 70;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border: none;
display: block;
}
</style>
</head>
<body>
<h3>OnlyOffice Debug Page</h3>
<div style="display: block;">
<form id="office_form" name="office_form" target="office_frame" action="" method="post">
<p>WOPI地址：
<select name="wopi_uri" id="wopi_uri_input" >
<option value="https://onlyoffice.fanhat.cn/hosting/wopi/word/edit?wopisrc=">OnlyOffice</option>
<option value="https://collaboraonline.fanhat.cn/browser/b7ba9a23ba/cool.html?WOPISrc=">CollaboraOnline</option>
<option value="https://libreoffice.fanhat.cn/loleaflet/1430151/loleaflet.html?WOPISrc=">LibreofficeOnline</option>
</select>
</p>
<p>WOPI工作地址：
<input name="wopisrc" id="wopisrc" value="https://collaboraonline.fanhat.cn/wopi/files/1" />
</p>
<p>WOPI访问Token：
<input name="access_token" value="test" type="text" />
</p>
<p>WOPI访问Token有效期：
<input name="access_token_ttl" value="30" type="text" />
</p>
<p>可自行访问WOPI地址的/hosting/discovery获取更多接口</p>
<button onclick="loadWopi();">加载</button>
</form>
</div>
<div id="frameholder" style="display: block;"></div>
<script type="application/javascript">
var frameholder = document.getElementById('frameholder');
var office_frame = document.createElement('iframe');
office_frame.name = 'office_frame';
office_frame.id = 'office_frame';
office_frame.title = 'Office Frame';
office_frame.setAttribute('allowfullscreen', 'true');
office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox allow-downloads allow-modals');
office_frame.setAttribute('allow', 'autoplay camera microphone display-capture');
frameholder.appendChild(office_frame);
function loadWopi() {
var uri=document.getElementById("wopi_uri_input").options[document.getElementById("wopi_uri_input").selectedIndex].value;
var workuri=encodeURIComponent(document.getElementById("wopisrc").value);
console.log('set action uri='+uri+workuri);
document.getElementById("office_form").action = uri+workuri;
console.log('submit page...');
document.getElementById('office_form').submit();
}
</script>
</body>
</html>
wopi_server_test