Installation

This page explains how to obtain Spreadsheet Viewer application and how to distribute it with your project.

Prerequisites, framework support

Spreadsheet Viewer is a web app that runs in an iframe. It is framework-agnostic.

It is assumed that the integration with the host app is done through the JavaScript API provided as part of the Spreadsheet Viewer package. The JavaScript API is a ECMAScript module that runs in the host app. It is assumed that the host app uses a bundler, which transpiles the ECMAScript module to code that runs in any supported browser. Other integration choices are listed in the API overview.

Quick start examples are available for:

Downloading the ZIP package

Spreadsheet Viewer is distributed as a ZIP package (file name SpreadsheetViewer.zip) attached to the Release Notes.

The ZIP package has the following contents:

• ./Spreadsheet Viewer.pdf - a product brochure that presents the main use cases and features
• ./spreadsheet-viewer/client-library/clientLibrary.js - a build an ECMAScript module of the JavaScript API
• ./spreadsheet-viewer/sv - a trial build of the frame assets
• ./examples/js - a quick start example for plain JavaScript
• ./examples/react - a quick start example for React
• ./examples/angular - a quick start example for Angular
• ./examples/vue - a quick start example for Vue

Installation

The quickest way to install Spreadsheet Viewer into your project is to use the builds provided in the ZIP package.

Follow the steps:

# 1. Extract the ZIP package
$ unzip -d SpreadsheetViewer SpreadsheetViewer.zip

# 2. Copy the trial build of the frame assets into the *static* assets of your project exposed on a web server
$ cp -r SpreadsheetViewer/spreadsheet-viewer/sv <your-project>/static/spreadsheet-viewer/sv

# 3. Copy the JavaScript API module into your JavaScript source code
$ cp SpreadsheetViewer/spreadsheet-viewer/client-library/clientLibrary.js <your-project>

Please refer to the page Frame assets for additional deployment instructions.

Usage

The simplest way to integrate Spreadsheet Viewer with your app is to import the JavaScript API as an ES module.

The JavaScript API creates an <iframe> as a child of the provided container element. The iframe loads the frame assets from the URL given to the configuration option assetsUrl:

import { SpreadsheetViewer } from './clientLibrary';

SpreadsheetViewer({ 
  container: document.querySelector('div#spreadsheet-viewer'), 
  assetsUrl: '/spreadsheet-viewer/sv/index.html'
})
  .then(instance => {
    instance.configure({
      licenseKey: 'evaluation' // contact us to order a license key for commercial use beyond evaluation
    })
    instance.loadWorkbook('/example.xlsx', 0); // also available: loading from Base64 and ArrayBuffer
  })
  .catch(error => {
    console.error(error.message);
  });

Please refer to the page JavaScript API for more detailed usage instructions, including information about the polyfills needed to support IE11.