| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | --- | 
					
						
							|  |  |  | sidebar_position: 5 | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # Data Export
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Writing Workbooks
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### API
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate spreadsheet bytes (file) from data_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var data = XLSX.write(workbook, opts); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `write` method attempts to package data from the workbook into a file in | 
					
						
							|  |  |  | memory.  By default, XLSX files are generated, but that can be controlled with | 
					
						
							|  |  |  | the `bookType` property of the `opts` argument.  Based on the `type` option, | 
					
						
							|  |  |  | the data can be stored as a "binary string", JS string, `Uint8Array` or Buffer. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The second `opts` argument is required.  ["Writing Options"](../api/write-options) | 
					
						
							|  |  |  | covers the supported properties and behaviors. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate and attempt to save file_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | XLSX.writeFile(workbook, filename, opts); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `writeFile` method packages the data and attempts to save the new file.  The | 
					
						
							|  |  |  | export file format is determined by the extension of `filename` (`SheetJS.xlsx` | 
					
						
							|  |  |  | signals XLSX export, `SheetJS.xlsb` signals XLSB export, etc). | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `writeFile` method uses platform-specific APIs to initiate the file save. In | 
					
						
							|  |  |  | NodeJS, `fs.readFileSync` can create a file.  In the web browser, a download is | 
					
						
							|  |  |  | attempted using the HTML5 `download` attribute, with fallbacks for IE. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate and attempt to save an XLSX file_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | XLSX.writeFileXLSX(workbook, filename, opts); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `writeFile` method embeds a number of different export functions.  This is | 
					
						
							|  |  |  | great for developer experience but not amenable to tree shaking using the | 
					
						
							|  |  |  | current developer tools.  When only XLSX exports are needed, this method avoids | 
					
						
							|  |  |  | referencing the other export functions. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The second `opts` argument is optional.  ["Writing Options"](../api/write-options) | 
					
						
							|  |  |  | covers the supported properties and behaviors. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### Examples
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Local file in a NodeJS server</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `writeFile` uses `fs.writeFileSync` in server environments: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var XLSX = require("xlsx"); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | /* output format determined by filename */ | 
					
						
							|  |  |  | XLSX.writeFile(workbook, "out.xlsb"); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | For Node ESM, the `writeFile` helper is not enabled. Instead, `fs.writeFileSync` | 
					
						
							|  |  |  | should be used to write the file data to a `Buffer` for use with `XLSX.write`: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | import { writeFileSync } from "fs"; | 
					
						
							|  |  |  | import { write } from "xlsx/xlsx.mjs"; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const buf = write(workbook, {type: "buffer", bookType: "xlsb"}); | 
					
						
							|  |  |  | /* buf is a Buffer */ | 
					
						
							|  |  |  | const workbook = writeFileSync("out.xlsb", buf); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Local file in a Deno application</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `writeFile` uses `Deno.writeFileSync` under the hood: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | // @deno-types="https://deno.land/x/sheetjs/types/index.d.ts" | 
					
						
							|  |  |  | import * as XLSX from 'https://deno.land/x/sheetjs/xlsx.mjs' | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | XLSX.writeFile(workbook, "test.xlsx"); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Applications writing files must be invoked with the `--allow-write` flag.  The | 
					
						
							|  |  |  | [`deno` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/deno/) has more examples | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Local file in a PhotoShop or InDesign plugin</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `writeFile` wraps the `File` logic in Photoshop and other ExtendScript targets. | 
					
						
							|  |  |  | The specified path should be an absolute path: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | #include "xlsx.extendscript.js"
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | /* output format determined by filename */ | 
					
						
							|  |  |  | XLSX.writeFile(workbook, "out.xlsx"); | 
					
						
							|  |  |  | /* at this point, out.xlsx is a file that you can distribute */ | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`extendscript` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/extendscript/) includes a more complex example. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Download a file in the browser to the user machine</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `XLSX.writeFile` wraps a few techniques for triggering a file save: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | - `URL` browser API creates an object URL for the file, which the library uses | 
					
						
							|  |  |  |   by creating a link and forcing a click. It is supported in modern browsers. | 
					
						
							|  |  |  | - `msSaveBlob` is an IE10+ API for triggering a file save. | 
					
						
							|  |  |  | - `IE_FileSave` uses VBScript and ActiveX to write a file in IE6+ for Windows | 
					
						
							|  |  |  |   XP and Windows 7.  The shim must be included in the containing HTML page. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | There is no standard way to determine if the actual file has been downloaded. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | /* output format determined by filename */ | 
					
						
							|  |  |  | XLSX.writeFile(workbook, "out.xlsb"); | 
					
						
							|  |  |  | /* at this point, out.xlsb will have been downloaded */ | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Download a file in legacy browsers</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `XLSX.writeFile` techniques work for most modern browsers as well as older IE. | 
					
						
							|  |  |  | For much older browsers, there are workarounds implemented by wrapper libraries. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | [`Downloadify`](https://github.com/dcneiner/downloadify) uses a Flash SWF button | 
					
						
							|  |  |  | to generate local files, suitable for environments where ActiveX is unavailable: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | Downloadify.create(id,{ | 
					
						
							|  |  |  |   /* other options are required! read the downloadify docs for more info */ | 
					
						
							|  |  |  |   filename: "test.xlsx", | 
					
						
							|  |  |  |   data: function() { return XLSX.write(wb, {bookType:"xlsx", type:"base64"}); }, | 
					
						
							|  |  |  |   append: false, | 
					
						
							|  |  |  |   dataType: "base64" | 
					
						
							|  |  |  | }); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`oldie` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/oldie/) shows an IE-compatible fallback scenario. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Browser upload file (ajax)</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | A complete example using XHR is [included in the XHR demo](https://github.com/SheetJS/SheetJS/tree/master/demos/xhr/), along | 
					
						
							|  |  |  | with examples for fetch and wrapper libraries.  This example assumes the server | 
					
						
							|  |  |  | can handle Base64-encoded files (see the demo for a basic nodejs server): | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | /* in this example, send a base64 string to the server */ | 
					
						
							|  |  |  | var wopts = { bookType:"xlsx", bookSST:false, type:"base64" }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | var wbout = XLSX.write(workbook,wopts); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | var req = new XMLHttpRequest(); | 
					
						
							|  |  |  | req.open("POST", "/upload", true); | 
					
						
							|  |  |  | var formdata = new FormData(); | 
					
						
							|  |  |  | formdata.append("file", "test.xlsx"); // <-- server expects `file` to hold name | 
					
						
							|  |  |  | formdata.append("data", wbout); // <-- `data` holds the base64-encoded data | 
					
						
							|  |  |  | req.send(formdata); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>PhantomJS (Headless Webkit) File Generation</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`headless` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/headless/) includes a complete demo to convert HTML | 
					
						
							|  |  |  | files to XLSB workbooks using [PhantomJS](https://phantomjs.org/). PhantomJS | 
					
						
							|  |  |  | `fs.write` supports writing files from the main process but has a different | 
					
						
							|  |  |  | interface from the NodeJS `fs` module: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var XLSX = require('xlsx'); | 
					
						
							|  |  |  | var fs = require('fs'); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | /* generate a binary string */ | 
					
						
							|  |  |  | var bin = XLSX.write(workbook, { type:"binary", bookType: "xlsx" }); | 
					
						
							|  |  |  | /* write to file */ | 
					
						
							|  |  |  | fs.write("test.xlsx", bin, "wb"); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Note: The section ["Processing HTML Tables"](./input#processing-html-tables) shows how | 
					
						
							|  |  |  | to generate a workbook from HTML tables in a page in "Headless WebKit". | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [included demos](https://github.com/SheetJS/SheetJS/tree/master/demos/) cover mobile apps and other special deployments. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Writing Examples
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | - <http://sheetjs.com/demos/table.html> exporting an HTML table | 
					
						
							|  |  |  | - <http://sheetjs.com/demos/writexlsx.html> generates a simple file | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Streaming Write
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The streaming write functions are available in the `XLSX.stream` object.  They | 
					
						
							|  |  |  | take the same arguments as the normal write functions but return a NodeJS | 
					
						
							|  |  |  | Readable Stream. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | - `XLSX.stream.to_csv` is the streaming version of `XLSX.utils.sheet_to_csv`. | 
					
						
							|  |  |  | - `XLSX.stream.to_html` is the streaming version of `XLSX.utils.sheet_to_html`. | 
					
						
							|  |  |  | - `XLSX.stream.to_json` is the streaming version of `XLSX.utils.sheet_to_json`. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>nodejs convert to CSV and write file</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var output_file_name = "out.csv"; | 
					
						
							|  |  |  | var stream = XLSX.stream.to_csv(worksheet); | 
					
						
							|  |  |  | stream.pipe(fs.createWriteStream(output_file_name)); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>nodejs write JSON stream to screen</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | /* to_json returns an object-mode stream */ | 
					
						
							|  |  |  | var stream = XLSX.stream.to_json(worksheet, {raw:true}); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | /* the following stream converts JS objects to text via JSON.stringify */ | 
					
						
							|  |  |  | var conv = new Transform({writableObjectMode:true}); | 
					
						
							|  |  |  | conv._transform = function(obj, e, cb){ cb(null, JSON.stringify(obj) + "\n"); }; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | stream.pipe(conv); conv.pipe(process.stdout); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <https://github.com/sheetjs/sheetaki> pipes write streams to nodejs response. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Generating JSON and JS Data
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | JSON and JS data tend to represent single worksheets. The utility functions in | 
					
						
							|  |  |  | this section work with single worksheets. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The ["Common Spreadsheet Format"](../csf/general) section describes | 
					
						
							|  |  |  | the object structure in more detail.  `workbook.SheetNames` is an ordered list | 
					
						
							|  |  |  | of the worksheet names.  `workbook.Sheets` is an object whose keys are sheet | 
					
						
							|  |  |  | names and whose values are worksheet objects. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The "first worksheet" is stored at `workbook.Sheets[workbook.SheetNames[0]]`. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### API
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Create an array of JS objects from a worksheet_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var jsa = XLSX.utils.sheet_to_json(worksheet, opts); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Create an array of arrays of JS values from a worksheet_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var aoa = XLSX.utils.sheet_to_json(worksheet, {...opts, header: 1}); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `sheet_to_json` utility function walks a workbook in row-major order, | 
					
						
							|  |  |  | generating an array of objects.  The second `opts` argument controls a number of | 
					
						
							|  |  |  | export decisions including the type of values (JS values or formatted text). The | 
					
						
							|  |  |  | ["JSON"](../api/utilities#json) section describes the argument in more detail. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | By default, `sheet_to_json` scans the first row and uses the values as headers. | 
					
						
							|  |  |  | With the `header: 1` option, the function exports an array of arrays of values. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### Examples
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | [`x-spreadsheet`](https://github.com/myliang/x-spreadsheet) is an interactive | 
					
						
							|  |  |  | data grid for previewing and modifying structured data in the web browser.  The | 
					
						
							|  |  |  | [`xspreadsheet` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/xspreadsheet) includes a sample script with the | 
					
						
							|  |  |  | `stox` function for converting from a workbook to x-spreadsheet data object. | 
					
						
							|  |  |  | <https://oss.sheetjs.com/sheetjs/x-spreadsheet> is a live demo. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Previewing data in a React data grid</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-05-30 05:04:05 +00:00
										 |  |  | [`react-data-grid`](https://adazzle.github.io/react-data-grid) is a data grid | 
					
						
							|  |  |  | built for React.  It uses two properties: `rows` of data objects and `columns` | 
					
						
							|  |  |  | which describe the columns.  For the purposes of massaging the data to fit the | 
					
						
							|  |  |  | `react-data-grid` API it is easiest to start from an array of arrays. | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | This demo starts by fetching a remote file and using `XLSX.read` to extract: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | import { useEffect, useState } from "react"; | 
					
						
							|  |  |  | import DataGrid from "react-data-grid"; | 
					
						
							|  |  |  | import { read, utils } from "xlsx"; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const url = "https://oss.sheetjs.com/test_files/RkNumber.xls"; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | export default function App() { | 
					
						
							|  |  |  |   const [columns, setColumns] = useState([]); | 
					
						
							|  |  |  |   const [rows, setRows] = useState([]); | 
					
						
							|  |  |  |   useEffect(() => {(async () => { | 
					
						
							|  |  |  |     const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     /* use sheet_to_json with header: 1 to generate an array of arrays */ | 
					
						
							|  |  |  |     const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     /* see react-data-grid docs to understand the shape of the expected data */ | 
					
						
							|  |  |  |     setColumns(data[0].map((r) => ({ key: r, name: r }))); | 
					
						
							|  |  |  |     setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => { | 
					
						
							|  |  |  |       acc[data[0][i]] = x; | 
					
						
							|  |  |  |       return acc; | 
					
						
							|  |  |  |     }, {}))); | 
					
						
							|  |  |  |   })(); }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   return <DataGrid columns={columns} rows={rows} />; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Previewing data in a VueJS data grid</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-05-30 05:04:05 +00:00
										 |  |  | [`vue3-table-lite`](https://linmasahiro.github.io/vue3-table-lite/dist/) is a | 
					
						
							|  |  |  | simple VueJS 3 data table.  It is featured in the | 
					
						
							|  |  |  | [VueJS demo](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/modify/). | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Populating a database (SQL or no-SQL)</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`database` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/database/) includes examples of working with | 
					
						
							|  |  |  | databases and query results. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Numerical Computations with TensorFlow.js</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | `@tensorflow/tfjs` and other libraries expect data in simple arrays, well-suited | 
					
						
							|  |  |  | for worksheets where each column is a data vector.  That is the transpose of how | 
					
						
							|  |  |  | most people use spreadsheets, where each row is a vector. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | A single `Array#map` can pull individual named rows from `sheet_to_json` export: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const XLSX = require("xlsx"); | 
					
						
							|  |  |  | const tf = require('@tensorflow/tfjs'); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const key = "age"; // this is the field we want to pull | 
					
						
							|  |  |  | const ages = XLSX.utils.sheet_to_json(worksheet).map(r => r[key]); | 
					
						
							|  |  |  | const tf_data = tf.tensor1d(ages); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | All fields can be processed at once using a transpose of the 2D tensor generated | 
					
						
							|  |  |  | with the `sheet_to_json` export with `header: 1`. The first row, if it contains | 
					
						
							|  |  |  | header labels, should be removed with a slice: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const XLSX = require("xlsx"); | 
					
						
							|  |  |  | const tf = require('@tensorflow/tfjs'); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | /* array of arrays of the data starting on the second row */ | 
					
						
							|  |  |  | const aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1}).slice(1); | 
					
						
							|  |  |  | /* dataset in the "correct orientation" */ | 
					
						
							|  |  |  | const tf_dataset = tf.tensor2d(aoa).transpose(); | 
					
						
							|  |  |  | /* pull out each dataset with a slice */ | 
					
						
							|  |  |  | const tf_field0 = tf_dataset.slice([0,0], [1,tensor.shape[1]]).flatten(); | 
					
						
							|  |  |  | const tf_field1 = tf_dataset.slice([1,0], [1,tensor.shape[1]]).flatten(); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`array` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/array/) shows a complete example. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Generating HTML Tables
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### API
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate HTML Table from Worksheet_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var html = XLSX.utils.sheet_to_html(worksheet); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `sheet_to_html` utility function generates HTML code based on the worksheet | 
					
						
							|  |  |  | data.  Each cell in the worksheet is mapped to a `<TD>` element.  Merged cells | 
					
						
							|  |  |  | in the worksheet are serialized by setting `colspan` and `rowspan` attributes. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### Examples
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `sheet_to_html` utility function generates HTML code that can be added to | 
					
						
							|  |  |  | any DOM element by setting the `innerHTML`: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var container = document.getElementById("tavolo"); | 
					
						
							|  |  |  | container.innerHTML = XLSX.utils.sheet_to_html(worksheet); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Combining with `fetch`, constructing a site from a workbook is straightforward: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>Vanilla JS + HTML fetch workbook and generate table previews</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <body> | 
					
						
							|  |  |  |   <style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style> | 
					
						
							|  |  |  |   <div id="tavolo"></div> | 
					
						
							|  |  |  |   <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> | 
					
						
							|  |  |  |   <script type="text/javascript"> | 
					
						
							|  |  |  | (async() => { | 
					
						
							|  |  |  |   /* fetch and parse workbook -- see the fetch example for details */ | 
					
						
							|  |  |  |   const workbook = XLSX.read(await (await fetch("sheetjs.xlsx")).arrayBuffer()); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   let output = []; | 
					
						
							|  |  |  |   /* loop through the worksheet names in order */ | 
					
						
							|  |  |  |   workbook.SheetNames.forEach(name => { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     /* generate HTML from the corresponding worksheets */ | 
					
						
							|  |  |  |     const worksheet = workbook.Sheets[name]; | 
					
						
							|  |  |  |     const html = XLSX.utils.sheet_to_html(worksheet); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     /* add a header with the title name followed by the table */ | 
					
						
							|  |  |  |     output.push(`<H3>${name}</H3>${html}`); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  |   /* write to the DOM at the end */ | 
					
						
							|  |  |  |   tavolo.innerHTML = output.join("\n"); | 
					
						
							|  |  |  | })(); | 
					
						
							|  |  |  |   </script> | 
					
						
							|  |  |  | </body> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>React fetch workbook and generate HTML table previews</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | It is generally recommended to use a React-friendly workflow, but it is possible | 
					
						
							|  |  |  | to generate HTML and use it in React with `dangerouslySetInnerHTML`: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```jsx | 
					
						
							|  |  |  | function Tabeller(props) { | 
					
						
							|  |  |  |   /* the workbook object is the state */ | 
					
						
							|  |  |  |   const [workbook, setWorkbook] = React.useState(XLSX.utils.book_new()); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   /* fetch and update the workbook with an effect */ | 
					
						
							|  |  |  |   React.useEffect(() => { (async() => { | 
					
						
							|  |  |  |     /* fetch and parse workbook -- see the fetch example for details */ | 
					
						
							|  |  |  |     const wb = XLSX.read(await (await fetch("sheetjs.xlsx")).arrayBuffer()); | 
					
						
							|  |  |  |     setWorkbook(wb); | 
					
						
							|  |  |  |   })(); }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   return workbook.SheetNames.map(name => (<> | 
					
						
							|  |  |  |     <h3>name</h3> | 
					
						
							|  |  |  |     <div dangerouslySetInnerHTML={{ | 
					
						
							|  |  |  |       /* this __html mantra is needed to set the inner HTML */ | 
					
						
							|  |  |  |       __html: XLSX.utils.sheet_to_html(workbook.Sheets[name]) | 
					
						
							|  |  |  |     }} /> | 
					
						
							|  |  |  |   </>)); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`react` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/react) includes more React examples. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details> | 
					
						
							|  |  |  |   <summary><b>VueJS fetch workbook and generate HTML table previews</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | It is generally recommended to use a VueJS-friendly workflow, but it is possible | 
					
						
							|  |  |  | to generate HTML and use it in VueJS with the `v-html` directive: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```jsx | 
					
						
							|  |  |  | import { read, utils } from 'xlsx'; | 
					
						
							|  |  |  | import { reactive } from 'vue'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const S5SComponent = { | 
					
						
							|  |  |  |   mounted() { (async() => { | 
					
						
							|  |  |  |     /* fetch and parse workbook -- see the fetch example for details */ | 
					
						
							|  |  |  |     const workbook = read(await (await fetch("sheetjs.xlsx")).arrayBuffer()); | 
					
						
							|  |  |  |     /* loop through the worksheet names in order */ | 
					
						
							|  |  |  |     workbook.SheetNames.forEach(name => { | 
					
						
							|  |  |  |       /* generate HTML from the corresponding worksheets */ | 
					
						
							|  |  |  |       const html = utils.sheet_to_html(workbook.Sheets[name]); | 
					
						
							|  |  |  |       /* add to state */ | 
					
						
							|  |  |  |       this.wb.wb.push({ name, html }); | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  |   })(); }, | 
					
						
							|  |  |  |   /* this state mantra is required for array updates to work */ | 
					
						
							|  |  |  |   setup() { return { wb: reactive({ wb: [] }) }; }, | 
					
						
							|  |  |  |   template: ` | 
					
						
							|  |  |  |   <div v-for="ws in wb.wb" :key="ws.name"> | 
					
						
							|  |  |  |     <h3>{{ ws.name }}</h3> | 
					
						
							|  |  |  |     <div v-html="ws.html"></div> | 
					
						
							|  |  |  |   </div>` | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [`vuejs` demo](https://github.com/SheetJS/SheetJS/tree/master/demos/vue) includes more React examples. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Generating Single-Worksheet Snapshots
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The `sheet_to_*` functions accept a worksheet object. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### API
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate a CSV from a single worksheet_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var csv = XLSX.utils.sheet_to_csv(worksheet, opts); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | This snapshot is designed to replicate the "CSV UTF8 (`.csv`)" output type. | 
					
						
							|  |  |  | ["Delimiter-Separated Output"](../api/utilities#delimiter-separated-output) describes the | 
					
						
							|  |  |  | function and the optional `opts` argument in more detail. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate "Text" from a single worksheet_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var txt = XLSX.utils.sheet_to_txt(worksheet, opts); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | This snapshot is designed to replicate the "UTF16 Text (`.txt`)" output type. | 
					
						
							|  |  |  | ["Delimiter-Separated Output"](../api/utilities#delimiter-separated-output) describes the | 
					
						
							|  |  |  | function and the optional `opts` argument in more detail. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | _Generate a list of formulae from a single worksheet_ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | var fmla = XLSX.utils.sheet_to_formulae(worksheet); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | This snapshot generates an array of entries representing the embedded formulae. | 
					
						
							|  |  |  | Array formulae are rendered in the form `range=formula` while plain cells are | 
					
						
							|  |  |  | rendered in the form `cell=formula or value`.  String literals are prefixed with | 
					
						
							|  |  |  | an apostrophe `'`, consistent with Excel's formula bar display. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ["Formulae Output"](../api/utilities#formulae-output) describes the function in more detail. |