forked from sheetjs/docs.sheetjs.com
		
	xlsx-cli
This commit is contained in:
		
							parent
							
								
									0ee20fd040
								
							
						
					
					
						commit
						f57d38c58b
					
				@ -1,5 +1,6 @@
 | 
			
		||||
---
 | 
			
		||||
title: Webpack
 | 
			
		||||
title: Packing Sheets with Webpack
 | 
			
		||||
sidebar_label: Webpack
 | 
			
		||||
pagination_prev: demos/net/index
 | 
			
		||||
pagination_next: demos/mobile/index
 | 
			
		||||
sidebar_custom_props:
 | 
			
		||||
@ -9,6 +10,19 @@ sidebar_custom_props:
 | 
			
		||||
import current from '/version.js';
 | 
			
		||||
import CodeBlock from '@theme/CodeBlock';
 | 
			
		||||
 | 
			
		||||
[Webpack](https://webpack.js.org/) is a modern build tool for generating static
 | 
			
		||||
sites. It has a robust JavaScript-powered plugin system[^1]
 | 
			
		||||
 | 
			
		||||
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
 | 
			
		||||
data from spreadsheets.
 | 
			
		||||
 | 
			
		||||
This demo uses Webpack and SheetJS to pull data from a spreadsheet and display
 | 
			
		||||
the content in an HTML table. We'll explore how to load SheetJS in a Webpack 5
 | 
			
		||||
Asset Plugin and generate data for use in webpages.
 | 
			
		||||
 | 
			
		||||
The ["Webpack 5 Demo"](#webpack-5-demo) creates a complete website powered by a
 | 
			
		||||
XLSX spreadsheet.
 | 
			
		||||
 | 
			
		||||
:::info pass
 | 
			
		||||
 | 
			
		||||
This demo covers static asset imports. For processing files in the browser, the
 | 
			
		||||
@ -17,15 +31,15 @@ importing the SheetJS library in a browser script.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
 | 
			
		||||
from Webpack loader scripts.
 | 
			
		||||
 | 
			
		||||
## Webpack 5 Asset Module
 | 
			
		||||
 | 
			
		||||
Webpack 5 supports asset modules. With a special option, the loader will receive
 | 
			
		||||
NodeJS Buffers that can be parsed. The dev server will even watch the files and
 | 
			
		||||
reload the page in development mode!
 | 
			
		||||
 | 
			
		||||
The [SheetJS NodeJS module](/docs/getting-started/installation/nodejs) can be
 | 
			
		||||
imported from Webpack loader scripts.
 | 
			
		||||
 | 
			
		||||
The following diagram depicts the workbook waltz:
 | 
			
		||||
 | 
			
		||||
```mermaid
 | 
			
		||||
@ -100,11 +114,12 @@ module.exports = {
 | 
			
		||||
 | 
			
		||||
The SheetJS loader script must export a `raw` property that is set to `true`.
 | 
			
		||||
 | 
			
		||||
The base export is expected to be the loader function. That function receives
 | 
			
		||||
the file contents as a Buffer, which can be parsed with `XLSX.read`. Typically
 | 
			
		||||
this script is CommonJS so the `require` form should be used.
 | 
			
		||||
The base export is expected to be the loader function. The loader receives the
 | 
			
		||||
file bytes as a Buffer, which can be parsed with the SheetJS `read` method[^2].
 | 
			
		||||
`read` returns a SheetJS workbook object[^3].
 | 
			
		||||
 | 
			
		||||
The loader in this demo will parse the first worksheet:
 | 
			
		||||
The loader in this demo will parse the workbook, pull the first worksheet, and
 | 
			
		||||
generate an array of row objects using the `sheet_to_json` method[^4]:
 | 
			
		||||
 | 
			
		||||
```js title="sheetjs-loader.js"
 | 
			
		||||
const XLSX = require("xlsx");
 | 
			
		||||
@ -144,7 +159,7 @@ document.body.appendChild(elt);
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
 | 
			
		||||
This demo was last tested on 2023 May 24 against Webpack 5.84.0
 | 
			
		||||
This demo was last tested on 2023 October 10 against Webpack 5.88.2
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -156,7 +171,7 @@ This demo was last tested on 2023 May 24 against Webpack 5.84.0
 | 
			
		||||
mkdir sheetjs-wp5
 | 
			
		||||
cd sheetjs-wp5
 | 
			
		||||
npm init -y
 | 
			
		||||
npm install webpack@5.84.0 webpack-cli@5.1.1 webpack-dev-server@4.15.0 --save
 | 
			
		||||
npm install webpack@5.88.2 webpack-cli@5.1.4 webpack-dev-server@4.15.1 --save
 | 
			
		||||
mkdir -p dist
 | 
			
		||||
mkdir -p src
 | 
			
		||||
mkdir -p data
 | 
			
		||||
@ -303,3 +318,8 @@ the file and save.  The page will not automatically update.
 | 
			
		||||
To verify that the data was added to the page, append `main.js` to the URL
 | 
			
		||||
(`http://localhost:8080/main.js`) and view the source.  The source will include
 | 
			
		||||
president names.  It will not include SheetJS library references!
 | 
			
		||||
 | 
			
		||||
[^1]: See ["Plugins"](https://webpack.js.org/concepts/plugins/) in the Webpack documentation.
 | 
			
		||||
[^2]: See [`read` in "Reading Files"](/docs/api/parse-options)
 | 
			
		||||
[^3]: See ["Workbook Object"](/docs/csf/book)
 | 
			
		||||
[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
 | 
			
		||||
 | 
			
		||||
@ -17,6 +17,14 @@ it is feasible to build command-line tools for various workflows.
 | 
			
		||||
This demo covers a number of strategies for building standalone processors. The
 | 
			
		||||
goal is to generate CSV output from an arbitrary spreadsheet file.
 | 
			
		||||
 | 
			
		||||
:::tip pass
 | 
			
		||||
 | 
			
		||||
The [`xlsx-cli`](https://cdn.sheetjs.com/xlsx-cli/) NodeJS script is available
 | 
			
		||||
as a package on the SheetJS CDN. It is an easy-to-use command-line tool for
 | 
			
		||||
translating files between supported spreadsheet file formats.
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
## NodeJS
 | 
			
		||||
 | 
			
		||||
There are a few popular tools for compiling NodeJS scripts to CLI programs.
 | 
			
		||||
@ -53,7 +61,7 @@ This demo was tested in the following deployments:
 | 
			
		||||
 | 
			
		||||
| Architecture | Version      | Node Target | Date       |
 | 
			
		||||
|:-------------|:-------------|:------------|:-----------|
 | 
			
		||||
| `darwin-x64` | `4.0.0-rc.2` | `14.15.3`   | 2023-05-08 |
 | 
			
		||||
| `darwin-x64` | `4.0.0-rc.2` | `14.15.3`   | 2023-10-10 |
 | 
			
		||||
| `darwin-arm` | `4.0.0-rc.2` | `20.7.0`    | 2023-09-25 |
 | 
			
		||||
| `win10-x64`  | `4.0.0-rc.2` | `14.15.3`   | 2023-10-09 |
 | 
			
		||||
| `win11-arm`  | `4.0.0-rc.2` | `18.17.1`   | 2023-09-25 |
 | 
			
		||||
 | 
			
		||||
@ -61,6 +61,7 @@ program
 | 
			
		||||
  .option('-F, --field-sep <sep>', 'CSV field separator', ",")
 | 
			
		||||
  .option('-R, --row-sep <sep>', 'CSV row separator', "\n")
 | 
			
		||||
  .option('-n, --sheet-rows <num>', 'Number of rows to process (0=all rows)')
 | 
			
		||||
  .option('--date-format <string>', 'output date format, for example yyyy-mm-dd')
 | 
			
		||||
  .option('--codepage <cp>', 'default to specified codepage when ambiguous')
 | 
			
		||||
  .option('--sst', 'generate shared string table for XLS* formats')
 | 
			
		||||
  .option('--compress', 'use compression when writing XLSX/M/B and ODS')
 | 
			
		||||
@ -154,6 +155,7 @@ if(program.all) {
 | 
			
		||||
}
 | 
			
		||||
if(program.sparse) opts.dense = false; else opts.dense = true;
 | 
			
		||||
if(program.codepage) opts.codepage = +program.codepage;
 | 
			
		||||
if(program.dateFormat) opts.dateNF = program.dateFormat;
 | 
			
		||||
 | 
			
		||||
if(program.dev) {
 | 
			
		||||
  opts.WTF = true;
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user