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 options than the JavaScript API are available, too.

Quick start examples are available for:

Downloading the ZIP package

Spreadsheet Viewer is distributed as a ZIP package (file name SpreadsheetViewer.zip) with 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 default, uncustomized build of the Spreadsheet Viewer iframe 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 output from `dist/sv/` into the *static* assets of your project exposed on a web server
$ cp -r SpreadsheetViewer/spreadsheet-viewer/sv <your-project>/static/sv

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

Usage

There is currently one way to use the JavaScript API in your project, by importing it as an ES module.

The JavaScript API creates an <iframe> as a child of the provided container element. The iframe loads the assets located at the provided assetsUrl:

import { SpreadsheetViewer } from './clientLibrary';

SpreadsheetViewer({ 
  container: document.querySelector('div#spreadsheet-viewer'), 
  assetsUrl: '/spreadsheet-viewer-assets/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);
  })
  .catch(error => {
    console.error(error.message);
  });

Please refer to the page JavaScript API for more detailed usage instructions.

Importing the polyfills

If you wish to support IE11, it is recommended to run the code above through a bundler like Webpack or Parcel. The bundler will replace the ES module import with a method that works in your setup. Your project should be configured to include two polyfills for IE11: Promise and Object.assign. The Angular, React and Vue quick start examples work in IE11 thanks to the bundler that adds these polyfills.

Deployment

Spreadsheet Viewer assets can be deployed onto any static file web server, by copying the sv folder as explained in the Installation instructions provided above.

List of assets

The following build files are considered assets needed by the Spreadsheet Viewer frame:

sv/*.css
sv/*.js
sv/*.woff
sv/*.woff2
sv/index.html

Caching headers

All file names, except sv/index.html, are content-hashed. This means that the file names contain hashes derived from the file content and it is encouraged to use aggressive HTTP caching headers with the css, js, woff, woff2 files. For example:

Cache-Control: max-age=31536000