Preview multiple documents on the same page-Intelligent Media Management(IMM)-阿里云帮助中心

Learn how to preview or edit multiple documents on the same page.

The WebOffice SDK for JavaScript previews documents by dynamically creating an iframe. The page and the iframe communicate via window.postMessage. To prevent postMessage communication conflicts between multiple iframe instances, nest each instance within another iframe.

For example:

index.html
    |-- iframe: a.html
    |-- iframe: b.html

index.html example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>index.html</title>
</head>
<body>
  <iframe src="./a.html" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  <iframe src="./b.html" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Then, implement the document preview in both a.html and b.html with the WebOffice SDK for JavaScript. For implementation details, see Step 2: Using the WebOffice SDK for JavaScript.

Note:

A Word document may not appear centered when it opens.

To adjust this, configure the following parameters:

aliyun.config({
  ......
  // Center the document.
  wordOptions:{
    isShowDocMap: false,
    isBestScale: true
  },
})