docs.sheetjs.com/09-legacy.md at f57d38c58b1f8ff0a0f40843035fe8e3d8ea1119

sheetjs/docs.sheetjs.com

Fork 4

SheetJS 7f366322e7 cell

2023-09-22 02:44:32 -04:00

10 KiB

Raw Blame History

title

pagination_prev

pagination_next

sidebar_position

sidebar_custom_props

Legacy Frameworks

demos/index

demos/grid/index

skip
1

import current from '/version.js'; import CodeBlock from '@theme/CodeBlock';

Over the years, many frameworks have been released. Some were popular years ago but have waned in recent years. There are still many deployments using these frameworks and it is oftentimes easier to continue maintenance than to rewrite using modern web techniques.

SheetJS libraries strive to maintain broad browser and JS engine compatibility.

Integration

The SheetJS Standalone scripts can be referenced in a SCRIPT tag from an HTML page. For legacy deployments, the shim script must be loaded first:

{`\

Internet Explorer

:::warning pass

Internet Explorer is unmaintained and users should consider modern browsers. The SheetJS testing grid still includes IE and should work.

:::

The modern upload and download strategies are not available in older versions of IE, but there are approaches using ActiveX or Flash.

Complete Example (click to show)

This demo includes all of the support files for the Flash and ActiveX methods.

Download the SheetJS Standalone script and shim script. Move both files to the project directory:

shim.min.js
xlsx.full.min.js

Download the demo ZIP.

The ZIP includes the demo HTML file as well as the Downloadify support files.

Extract the contents to the same folder as the scripts from step 1

Start a HTTP server:

npx -y http-server .

Access the index.html from a machine with Internet Explorer.

Other Live Demos (click to show)

:::caution pass

The hosted solutions may not work in older versions of Windows. For testing, demo pages should be downloaded and hosted using a simple HTTP server.

:::

https://oss.sheetjs.com/sheetjs/ajax.html uses XMLHttpRequest to download test files and convert to CSV

https://oss.sheetjs.com/sheetjs/ demonstrates reading files with FileReader.

Older versions of IE do not support HTML5 File API but do support Base64.

On MacOS you can get the Base64 encoding with:

$ <target_file base64 | pbcopy

On Windows XP and up you can get the Base64 encoding using certutil:

> certutil -encode target_file target_file.b64

(note: You have to open the file and remove the header and footer lines)

Upload Strategies

IE10 and IE11 support the standard HTML5 FileReader API:

function handle_fr(e) {
  var f = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var wb = XLSX.read(e.target.result);
    process_wb(wb); // DO SOMETHING WITH wb HERE
  };
  reader.readAsArrayBuffer(f);
}
input_dom_element.addEventListener('change', handle_fr, false);

Blob#arrayBuffer is not supported in IE!

ActiveX Upload

Through the Scripting.FileSystemObject object model, a script in the VBScript scripting language can read from an arbitrary path on the file system. The shim includes a special IE_LoadFile function to read binary data from files. This should be called from a file input onchange event:

var input_dom_element = document.getElementById("file");
function handle_ie() {
  /* get data from selected file */
  var path = input_dom_element.value;
  var bstr = IE_LoadFile(path);
  /* read workbook */
  var wb = XLSX.read(bstr, {type: 'binary'});
  /* DO SOMETHING WITH workbook HERE */
}
input_dom_element.attachEvent('onchange', handle_ie);

Download Strategies

As part of the File API implementation, IE10 and IE11 provide the msSaveBlob and msSaveOrOpenBlob functions to save blobs to the client computer. This approach is embedded in XLSX.writeFile and no additional shims are necessary.

Flash-based Download

It is possible to write to the file system using a SWF file. Downloadify¹ implements one solution. Since a genuine click is required, there is no way to force a download. The safest data type is Base64:

// highlight-next-line
Downloadify.create(element_id, {
  /* Downloadify boilerplate */
  swf: 'downloadify.swf',
  downloadImage: 'download.png',
  width: 100, height: 30,
  transparent: false, append: false,

  // highlight-start
  /* Key parameters */
  filename: "test.xlsx",
  dataType: 'base64',
  data: function() { return XLSX.write(wb, { bookType: "xlsx", type: 'base64' }); }
  // highlight-end
// highlight-next-line
});

ActiveX Download

Through the Scripting.FileSystemObject object model, a script in the VBScript scripting language can write to an arbitrary path on the filesystem. The shim includes a special IE_SaveFile function to write binary strings to file. It attempts to write to the Downloads folder or Documents folder or Desktop.

This approach does not require user interaction, but ActiveX must be enabled. It is embedded as a strategy in writeFile and used only if the shim script is included in the page and the relevant features are enabled on the target system.

Frameworks

Dojo Toolkit

Live Demos

:::note pass

These demos have been tested with Dojo Toolkit 1.10.4 and 1.17.3.

:::

:::warning pass

The official Google CDN is out of date. This is a known CDN bug.

The script https://docs.sheetjs.com/dojo/dojo.js was fetched from the official 1.17.3 uncompressed release artifact² on 2023-08-16.

:::

Installation

The "AMD" instructions includes details for use with require.

Integration in the demos (click to show)

The demos use the async loading strategy with the SheetJS CDN:

{`\

The "Dojo" section in "Bundlers" includes a complete example mirroring the official export example

Details (click to show)

Reading Data

When fetching spreadsheets with XHR, handleAs: "arraybuffer" yields an ArrayBuffer which can be passed to XLSX.read:

<div id="tbl"></div>
<script>
require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
  xhr("https://sheetjs.com/pres.numbers", {
    headers: { "X-Requested-With": null },
// highlight-next-line
    handleAs: "arraybuffer"
  }).then(function(ab) {
    /* read ArrayBuffer */
// highlight-next-line
    var wb = XLSX.read(ab);
    /* display first worksheet data */
    var ws = wb.Sheets[wb.SheetNames[0]];
    document.getElementById("tbl").innerHTML = XLSX.utils.sheet_to_html(ws);
  });
});
</script>

:::note pass

The X-Requested-With header setting resolves some issues related to CORS.

:::

Writing Data

XLSX.writeFile works as expected:

<script>
require(["xlsx"], function(_XLSX) {
  var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split(""), [5,4,3,3,7,9,5]]);
  var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  /* create an XLSX file and try to save to SheetJSDojo.xlsx */
  // highlight-next-line
  XLSX.writeFile(workbook, "SheetJSDojo.xlsx");
});
</script>

KnockoutJS

KnockoutJS was a popular MVVM framework.

The Live demo shows a view model that is updated with file data and exported to spreadsheets.

Full Exposition (click to show)

State

Arrays of arrays are the simplest data structure for representing worksheets.

var aoa = [
  [1, 2], // A1 = 1, B1 = 2
  [3, 4]  // A1 = 3, B1 = 4
];

ko.observableArray should be used to create the view model:

function ViewModel() {
  /* use an array of arrays */
  this.aoa = ko.observableArray([ [1,2], [3,4] ]);
}
/* create model */
var model = new ViewModel();
ko.applyBindings(model);

XLSX.utils.sheet_to_json with header: 1 generates data for the model:

/* starting from a `wb` workbook object, pull first worksheet */
var ws = wb.Sheets[wb.SheetNames[0]];
/* convert the worksheet to an array of arrays */
var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
/* update model */
model.aoa(aoa);

XLSX.utils.aoa_to_sheet generates worksheets from the model:

var aoa = model.aoa();
var ws = XLSX.utils.aoa_to_sheet(aoa);

Data Binding

data-bind="foreach: ..." provides a simple approach for binding to TABLE:

<table data-bind="foreach: aoa">
  <tr data-bind="foreach: $data">
    <td><span data-bind="text: $data"></span></td>
  </tr>
</table>

Unfortunately the nested "foreach: $data" binding is read-only. A two-way binding is possible using the $parent and $index binding context properties:

<table data-bind="foreach: aoa">
  <tr data-bind="foreach: $data">
    <td><input data-bind="value: $parent[$index()]" /></td>
  </tr>
</table>

Project hosted at https://github.com/dcneiner/Downloadify ↩︎
All Dojo Toolkit releases are available at https://download.dojotoolkit.org/. The mirrored dojo.js corresponds to the 1.17.3 uncompressed script http://download.dojotoolkit.org/release-1.17.3/dojo.js.uncompressed.js. ↩︎

10 KiB Raw Blame History