Installation

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

Prerequisities, 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 Client Libary provided as part of the Spreadsheet Viewer package. The Client Libary is a ECMAScript module that runs in the host app. It is assumed that the host app uses a bundler, which transpilers the ECMAScript module to code that runs in any supported browser. Other integration options than the Client Libary are available, too.

Quick start examples are available for:

Downloading the ZIP package

Spreadsheet Viewer is distributed as a ZIP package with the following contents:

• ./Spreadsheet Viewer.pdf - a white paper that presents the main use cases and features
• ./spreadsheet-viewer/client-library/clientLibrary.js - a build an ECMAScript module of the [Client Library API|Guide and API: Client Library]
• ./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 spreadsheet-viewer-package spreadsheet-viewer-package.zip

# 2. Copy the output from `dist/sv/` into the *static* assets of your project exposed on a web server
$ cp -r spreadsheet-viewer-package/spreadsheet-viewer/sv <your-project>/static/sv

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

Usage

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

The client library 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 Guide and API: Client Library 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