All Products
Search
Document Center

Intelligent Media Management:Gunakan WebOffice

Last Updated:Jul 06, 2025

Untuk alasan keamanan, saat membuka URL untuk pratinjau online dan pengeditan kolaboratif, Anda perlu menyematkan token di halaman HTML terlebih dahulu. Token ini berlaku selama 30 menit. Untuk menjaga dokumen tetap terbuka lebih dari 30 menit, gunakan fitur pembaruan token untuk memperbarui token sebelum kedaluwarsa.

Pemrosesan dokumen

Alur pratinjau online dan pengeditan kolaboratif dokumen

  1. Pengguna mengirim permintaan untuk melihat pratinjau atau mengedit dokumen secara online.

  2. Pengembang mengonfigurasi halaman agar halaman memanggil API IMM GenerateWebofficeToken untuk mendapatkan token Weboffice yang digunakan pengguna dalam mengakses dokumen.

  3. Pengguna membuka halaman dan melihat pratinjau atau mengedit dokumen yang dibuka di server IMM Weboffice.

  4. Halaman meminta pembaruan token karena token akan segera kedaluwarsa.

  5. Halaman memanggil API IMM RefreshWebofficeToken untuk memperbarui token Weboffice.

  6. Pengguna melanjutkan melihat pratinjau atau mengedit dokumen dengan token baru.

Referensi backend

  1. GenerateWebofficeToken: Operasi API yang digunakan untuk mendapatkan token Weboffice.

  2. RefreshWebofficeToken: Operasi API yang digunakan untuk memperbarui token Weboffice.

Referensi 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>
  <div id="weboffice-zone"></div>
  <script> 
    window.onload = init;
    var tokenInfo=await axios.get("https://example.developer.backend.com/GenerateWebofficeToken") // Panggil operasi backend untuk mendapatkan tautan pratinjau dan token. 
    function init() {
      weboffice(tokenInfo)
    }
    function weboffice(tokenInfo) {
      var mount = document.getElementById('weboffice-zone');
      var demo = aliyun.config({
        mount: mount,
        url: tokenInfo.WebofficeURL,
        refreshToken: refreshTokenPromise // Token diperbarui secara otomatis saat akan kedaluwarsa. 
      });
      demo.setToken({
        token: tokenInfo.AccessToken,
        timeout: 25*60*1000 // Periode validitas token. Unit: milidetik. Token diperbarui setelah 25 menit. 
      });
    }

    // Metode refreshToken tidak mendukung async dan await. Objek promise atau objek umum {token,timeout} dapat dikembalikan. 
    function refreshTokenPromise() {
      return new Promise(function(resolve){
        axios.get("https://example.developer.backend.com/RefreshWebofficeURLToken", tokenInfo) // Panggil operasi backend untuk memperbarui token. 
        .then(r => r.data)
        .then(function(data) {
          // Simpan data untuk pembaruan berikutnya. 
          tokenInfo = data
          resolve({
            token: tokenInfo.AccessToken,
            timeout: 10*60*1000 
          })
        })
      })
    }
  </script>
</body>
</html>