Por motivos de seguridad, no es posible abrir directamente una URL para la vista previa de documentos en línea o la edición colaborativa. Debe incluir un token de acceso en la página HTML para abrir el documento y realizar estas tareas. Un token de acceso tiene una validez de solo 30 minutos a partir de su generación. Para mantener el documento abierto durante más tiempo, actualice el token de acceso antes de que caduque.
Procesamiento de documentos
Un usuario abre la página web para la vista previa del documento o la edición colaborativa.
Se invoca la operación GenerateWebofficeToken de Intelligent Media Management (IMM) para generar un token de acceso. Asimismo, se llama al método config del IMM WebOffice SDK for JavaScript para inicializarlo.
El usuario puede previsualizar o editar el documento en la página web.
Cuando el token de acceso está por caducar, la página web solicita automáticamente su renovación.
La página web ejecuta el callback refreshToken, lo cual incluye una llamada a la operación de API de IMM RefreshWebofficeToken para renovar el token de acceso.
El usuario obtiene acceso prolongado al documento.
Referencias de backend
GenerateWebofficeToken: la operación de API que genera un token de acceso.
RefreshWebofficeToken: la operación de API que renueva un token de acceso.
Referencias de frontend
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html,body{
margin:0;
height:100%;
}
#weboffice-zone{
height: 100%;
width: 100%;
}
iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://g.alicdn.com/IMM/office-js/1.1.15/aliyun-web-office-sdk.min.js"></script>
<script src="https://g.alicdn.com/code/lib/axios/0.27.2/axios.min.js"></script>
<div id="weboffice-zone"></div>
<script>
window.onload = init;
var tokenInfo;
function init() {
// Call the backend operation to create an access token and URL for document preview or collaborative editing.
axios.get("https://example.developer.backend.com/GenerateWebofficeToken")
.then(r => r.data)
.then(function (data){
tokenInfo = data;
weboffice(tokenInfo);
});
}
function weboffice(tokenInfo) {
var mount = document.getElementById('weboffice-zone');
var demo = aliyun.config({
mount: mount,
url: tokenInfo.WebofficeURL,
refreshToken: refreshTokenPromise // Refresh the access token when it is about to expire.
});
demo.setToken({
token: tokenInfo.AccessToken,
timeout: 25*60*1000 // The validity period of the access token. Unit: milliseconds. The access token is refreshed after 25 minutes.
});
}
// The refreshToken method does not support async and await. It can return a promise object or a common object {token,timeout}.
function refreshTokenPromise() {
return new Promise(function(resolve){
axios.get("https://example.developer.backend.com/RefreshWebofficeURLToken", tokenInfo) // Call the backend operation to refresh the token.
.then(r => r.data)
.then(function(data) {
// Save the data for the next refresh.
tokenInfo = data
resolve({
token: tokenInfo.AccessToken,
timeout: 10*60*1000
})
})
})
}
</script>
</body>
</html>