Load a document

The JavaScript API allows easy interaction with ARender using various commands listed here .

Load a document

The loadDocument and openDocument functions from the API, described here allow you to load and open a document on the ARender server.

Note that document opening is secured, so only documents from your document space can be opened.

Implementation example from the iframe

JavaScript API requests are made on the window object of the iframe, as shown below.

ReactJS

const loadAndOpenDocument = () => {
  const iframeWindow = iframeRef.current?.contentWindow;

  if (iframeWindow) {
    iframeWindow.getARenderJS().loadDocument(
      "loadingQuery?url=url/du/document.zip",
      (id) => {
        console.log(id);
        iframeWindow.getARenderJS().openDocument(id);
      }
    );
  } else {
    console.error("The iframe is not accessible or not loaded.");
  }
};

Angular

loadAndOpenDocument(): void {
  const iframeWindow = this.iframeRef.nativeElement.contentWindow;

  if(iframeWindow) {
    iframeWindow.getARenderJS().loadDocument(
      "loadingQuery?url=url/du/document.zip",
      (id: string) => {
        console.log(id);
        iframeWindow.getARenderJS().openDocument(id);
      }
    );
  } else {
    console.error("The iframe is not accessible or not loaded.");
  }
}

VueJS

/**
 * Returns the ARenderJS object from the iframe.
 * Throws an error if the iframe is not accessible or not loaded.
 */
function getARenderJS() {
  const iframeWindow = iframeRef.value?.contentWindow
    ? iframeRef.value.contentWindow
    : undefined

  if (iframeWindow) {
    return iframeWindow.getARenderJS()
  }
  throw new Error("The iframe is not accessible or not loaded.")
}

/**
 * Loads and opens a document in ARender.
 * @param url The URL of the document to load.
 */
function loadAndOpenDocument(url) {
  getARenderJS().loadDocument("loadingQuery?url=" + url, id => {
    getARenderJS().openDocument(id)
  })
}

/**
 * Expose the `loadAndOpenDocument` function to the parent component.
 */
defineExpose({
  loadAndOpenDocument
})

Svelte

/**
 * Returns the ARenderJS object from the iframe.
 * Throws an error if the iframe is not accessible or not loaded.
 */
function getARenderJS() {
  const iframeWindow = iframeRef?.contentWindow
    ? iframeRef.contentWindow
    : undefined

  if (iframeWindow) {
    return iframeWindow.getARenderJS()
  }
  throw new Error("The iframe is not accessible or not loaded.")
}

/**
 * Loads and opens a document in ARender.
 * @param url The URL of the document to load.
 */
export function loadAndOpenDocument(url) {
  getARenderJS().loadDocument("loadingQuery?url=" + url, id => {
    getARenderJS().openDocument(id)
  })
}

Javascript

Note that if you attempt to integrate ARender into a local directory, to interact with a local HTML file, you must first serve it on the localhost port of your choice.

You can do this easily in several ways, with Python, Node.js, PHP, or others. Here is an example with Python 3.x:

• Open a command prompt in the directory of the host application
• Start the server with http-server -p 8000 (Replace 8000 with the port of your choice)
• Access the HTML file from your browser with the URL http://localhost:8000/index.html

To load and open a document in ARender, you can create the following function in the JavaScript file of the host application:

function loadAndOpen() {
  const iframe = document.getElementById('arender-iframe');
  if (iframe && iframe.contentWindow) {
    iframeWindow.getARenderJS().loadDocument(
      "loadingQuery?url=", // pass the url of the document to load here, after the equal sign
      (id) => {
        console.log(id);
        iframeWindow.getARenderJS().openDocument(id);
      }
    );
  } else {
    console.error("The iframe is inaccesible or has not loaded yet");
  }
}