dongzili
/
file-viewer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flyfish Viewer Manual JS Demo</title>
    <style>
      :root {
        color: #172033;
        background: #f4f7f8;
        font-family: Inter, "Segoe UI", "PingFang SC", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
      }

      main {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 100vh;
      }

      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 18px;
        border-bottom: 1px solid #d8e1e8;
        background: #ffffff;
      }

      h1,
      p {
        margin: 0;
      }

      h1 {
        font-size: 18px;
        line-height: 1.3;
      }

      p {
        margin-top: 4px;
        color: #64748b;
        font-size: 13px;
      }

      code {
        padding: 2px 6px;
        border-radius: 5px;
        background: #edf2f7;
        color: #334155;
      }

      #viewer {
        width: 100%;
        height: 100%;
        min-height: 0;
        background: #ffffff;
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <div>
          <h1>Manual Pure JS</h1>
          <p>普通页面通过原生 JS 动态加载 <code>mountViewer</code> 浏览器包。</p>
        </div>
        <p id="status">loading</p>
      </header>
      <div id="viewer" data-testid="manual-js-viewer"></div>
    </main>

    <script>
      var statusNode = document.getElementById('status')
      var host = document.getElementById('viewer')
      var bundleUrl = '/vendor/file-viewer-web/flyfish-file-viewer-web.iife.js'

      function setStatus(value) {
        document.body.setAttribute('data-viewer-status', value)
        statusNode.textContent = value
      }

      function loadViewerApi() {
        if (window.FlyfishFileViewerWeb) {
          return Promise.resolve(window.FlyfishFileViewerWeb)
        }
        return new Promise(function (resolve, reject) {
          var script = document.createElement('script')
          script.src = bundleUrl
          script.async = true
          script.onload = function () {
            if (window.FlyfishFileViewerWeb) {
              resolve(window.FlyfishFileViewerWeb)
            } else {
              reject(new Error('FlyfishFileViewerWeb global is unavailable'))
            }
          }
          script.onerror = function () {
            reject(new Error('Failed to load ' + bundleUrl))
          }
          document.head.appendChild(script)
        })
      }

      loadViewerApi()
        .then(function (api) {
          api.mountViewer(host, {
            url: '/example/word.docx',
            options: {
              theme: 'light',
              toolbar: {
                position: 'bottom-right'
              }
            },
            onEvent: function (event) {
              if (event && (event.type === 'load-start' || event.type === 'load-complete')) {
                setStatus(event.type)
              }
            }
          })
          setStatus('mounted')
        })
        .catch(function (error) {
          console.error(error)
          setStatus('error')
        })
    </script>
  </body>
</html>