forked from sheetjs/docs.sheetjs.com
		
	alasql-browser
This commit is contained in:
		
							parent
							
								
									e7e2d1a709
								
							
						
					
					
						commit
						15c8071586
					
				| @ -72,7 +72,7 @@ function localStorage_to_sheet() { | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 February 26. | ||||
| This demo was last tested on 2023 April 09. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -141,7 +141,7 @@ array of pairs.  Consider the following data in Local Storage: | ||||
| |:---:|:----------| | ||||
| | "b" | "Logical" | | ||||
| | "n" | "Numeric" | | ||||
| | "s" | "Textual"  | | ||||
| | "s" | "Textual" | | ||||
| 
 | ||||
| The natural representation is an array of arrays: | ||||
| 
 | ||||
| @ -155,6 +155,13 @@ The natural representation is an array of arrays: | ||||
| 
 | ||||
| #### Exporting Storage | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| Web Storage iteration order is not defined.  By using indices as keys, the row | ||||
| objects approach has an ordering.  That does not apply to the general case. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| In modern browsers, `Object.entries` will generate an array of key/value pairs. | ||||
| `XLSX.utils.aoa_to_sheet` will interpret that array as a worksheet with 2 cols: | ||||
| 
 | ||||
| @ -177,3 +184,50 @@ function ws_to_localStorage(ws) { | ||||
|   aoa.forEach(([key, val]) => localStorage.setItem(key, val)); | ||||
| } | ||||
| ``` | ||||
| 
 | ||||
| ### Live Demo | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 April 09. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| This example fills `localStorage` with 10 random keys and 10 random values, | ||||
| generates a worksheet from the data and writes to a new file. | ||||
| 
 | ||||
| ```jsx live | ||||
| function SheetJSRandomStorage() { | ||||
|   const [out, setOut] = React.useState(""); | ||||
|   const [rows, setRows] = React.useState([]); | ||||
|   const xport = React.useCallback(async() => { | ||||
|     // reset and populate localStorage | ||||
|     localStorage.clear(); | ||||
|     var data = []; | ||||
|     for(let i = 0, last = 0; i < 10; ++i) { | ||||
|       var k = ((Math.random() * 20)|0) + last; | ||||
|       var v = (Math.random() * 16777216).toString(36); | ||||
|       localStorage.setItem(k, v); | ||||
|       data.push([k,v]); | ||||
|       last = k; | ||||
|     } | ||||
|     setRows(Object.entries(localStorage)); | ||||
| 
 | ||||
|     // create new worksheet from localStorage | ||||
|     const aoa = Object.entries(localStorage); | ||||
|     const new_ws = XLSX.utils.aoa_to_sheet(aoa); | ||||
| 
 | ||||
|     // create and export workbook | ||||
|     const new_wb = XLSX.utils.book_new(); | ||||
|     XLSX.utils.book_append_sheet(new_wb, new_ws, "Sheet1"); | ||||
|     XLSX.writeFile(new_wb, "SheetJSRandomStorage.xlsx"); | ||||
|   }); | ||||
|   return ( <> | ||||
|     {out && ( <><a href={url}>{url}</a><pre>{out}</pre></> )} | ||||
|     {rows.length && (<table><tr><th>Key</th><th>Value</th></tr> | ||||
|       {rows.map(([k,v]) => (<tr><td>{k}</td><td>{v}</td></tr>))} | ||||
|     </table>) || null} | ||||
|     <br/><button onClick={xport}><b>Export!</b></button> | ||||
|   </> ); | ||||
| } | ||||
| ``` | ||||
|  | ||||
| @ -6,6 +6,10 @@ sidebar_custom_props: | ||||
|   sql: true | ||||
| --- | ||||
| 
 | ||||
| <head> | ||||
|   <script src="/alasql/alasql.js"></script> | ||||
| </head> | ||||
| 
 | ||||
| import current from '/version.js'; | ||||
| 
 | ||||
| AlaSQL is a pure JavaScript in-memory SQL database.  It has built-in support for | ||||
| @ -15,7 +19,180 @@ This demo covers basic concepts pertaining to data import and export.  The | ||||
| official documentation includes advanced examples and deployment tips as well as | ||||
| strategies for general data processing in AlaSQL expressions. | ||||
| 
 | ||||
| ## NodeJS Usage | ||||
| :::note | ||||
| 
 | ||||
| This demo was tested in the following environments: | ||||
| 
 | ||||
| | Environment         | AlaSQL |    Date    | | ||||
| |:--------------------|:-------|:----------:| | ||||
| | NodeJS              | 3.1.0  | 2023-02-23 | | ||||
| | Standalone (Chrome) | 3.0.0  | 2023-04-09 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| ## Live Demo | ||||
| 
 | ||||
| This demo fetches <https://sheetjs.com/pres.numbers>, performs a `SELECT` query | ||||
| using the built-in AlaSQL + SheetJS integration, then displays the result. Using | ||||
| the result as a data source, the demo will write to a new spreadsheet. | ||||
| 
 | ||||
| <details><summary><b>Demo AlaSQL Queries</b> (click to show)</summary> | ||||
| 
 | ||||
| ```sql title="AlaSQL Query for reading data from a workbook" | ||||
| SELECT `Index`,          -- "Index" field is the "Index" column of the sheet | ||||
|   UPPER(`Name`) AS `Nom` -- "Nom" field will be uppercase of "Name" column | ||||
| FROM XLSX(?, {           -- Parse the workbook bytes passed to alasql.promise | ||||
|   autoExt: false         -- This option is required in the browser | ||||
| }) | ||||
| ``` | ||||
| 
 | ||||
| ```sql title="AlaSQL Query for writing data to a workbook" | ||||
| SELECT *                 -- use every field from every row in dataset | ||||
| INTO XLSX(               -- export data to file | ||||
|   "SheetJSAlaSQL.xlsx"   -- filename for export | ||||
| ) FROM ? | ||||
| ``` | ||||
| 
 | ||||
| </details> | ||||
| 
 | ||||
| :::caution | ||||
| 
 | ||||
| If the live demo shows a message | ||||
| 
 | ||||
| ``` | ||||
| alasql undefined | ||||
| ``` | ||||
| 
 | ||||
| please refresh the page.  This is a known bug in the documentation generator. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| ```jsx live | ||||
| function SheetJSAlaSQL() { | ||||
|   const q1 = "SELECT `Index`, UPPER(`Name`) AS `Nom` FROM XLSX(?,{autoExt:false})"; | ||||
|   const q2 = `SELECT * INTO XLSX("SheetJSAlaSQL.xlsx") FROM ?`; | ||||
|   const url = "https://sheetjs.com/pres.numbers"; | ||||
|   const [rows, setRows] = React.useState([]); | ||||
|   const loadURL = React.useCallback(async() => { | ||||
|     if(typeof alasql=="undefined") return setRows([{Nom:"alasql undefined"}]); | ||||
|     const blob = await (await fetch(url)).blob(); | ||||
|     const data = URL.createObjectURL(blob); | ||||
|   	const res = await alasql.promise(q1,[data]); | ||||
|     setRows(res); | ||||
|     await alasql.promise(q2, [res]); | ||||
|   }, []); | ||||
|   return ( <> | ||||
|     <pre><b>URL: </b>{url}<br/><b>Import: </b>{q1}<br/><b>Export: </b>{q2}</pre> | ||||
|     <table><tr><th>Index</th><th>Nom</th></tr> | ||||
|       {rows.map(({Nom, Index}) => <tr><td>{Index}</td><td>{Nom}</td></tr>)} | ||||
|     </table> | ||||
|     <button onClick={loadURL}>Click to start</button> | ||||
|   </> ); | ||||
| } | ||||
| ``` | ||||
| 
 | ||||
| ## Browser | ||||
| 
 | ||||
| #### Standalone Scripts | ||||
| 
 | ||||
| The [Standalone scripts](/docs/getting-started/installation/standalone) should | ||||
| be loaded before the `alasql` script: | ||||
| 
 | ||||
| ```html | ||||
| <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script> | ||||
| <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> | ||||
| <script src="https://cdn.jsdelivr.net/npm/alasql"></script> | ||||
| ``` | ||||
| 
 | ||||
| #### Frameworks and Bundlers | ||||
| 
 | ||||
| `alasql` uses an older version of the library.  It can be overridden through a | ||||
| `package.json` override. The lines should be added *before* installing `alasql`: | ||||
| 
 | ||||
| <pre><code parentName="pre" {...{"className": "language-json"}}>{`\ | ||||
| { | ||||
|   /* add this part before "name" */ | ||||
|   /* highlight-start */ | ||||
|   "overrides": { | ||||
|     "xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz" | ||||
|   }, | ||||
|   /* highlight-end */ | ||||
|   "name": "my-project", | ||||
|   /* ... more fields ... */ | ||||
| `} | ||||
| </code></pre> | ||||
| 
 | ||||
| After adding the override, AlaSQL can be installed through `npm`: | ||||
| 
 | ||||
| ```bash | ||||
| npm install --save alasql | ||||
| ``` | ||||
| 
 | ||||
| In imports, the SheetJS library must be passed to AlaSQL as shown below: | ||||
| 
 | ||||
| ```js | ||||
| import * as alasql from 'alasql'; | ||||
| import * as XLSX from 'xlsx'; | ||||
| alasql.utils.isBrowserify = false; | ||||
| alasql.utils.global.XLSX = XLSX; | ||||
| ``` | ||||
| 
 | ||||
| ### Reading Files | ||||
| 
 | ||||
| The `XLSX` "from" target expects a filename. In the browser, AlaSQL uses object | ||||
| URLs which can be created from `Blob` or `File` objects. | ||||
| 
 | ||||
| The following snippet fetches data and passes to AlaSQL: | ||||
| 
 | ||||
| ```js | ||||
| const blob = await (await fetch("https://sheetjs.com/pres.numbers")).blob(); | ||||
| const data = URL.createOjectURL(blob); | ||||
| const res = await alasql.promise("SELECT * FROM XLSX(?, {autoExt: false}", [data]); | ||||
| ``` | ||||
| 
 | ||||
| By default, the `XLSX` "from" target automatically adds a `.xlsx` extension.  To | ||||
| read URLs, the `autoExt: false` option should be passed as the second argument: | ||||
| 
 | ||||
| ```sql | ||||
| SELECT `Name`, `Index` FROM XLSX( | ||||
|   ? --<< this will be the URL passed into `alasql.promise` | ||||
| // highlight-start | ||||
|   , { --<< options are supplied as the second argument to XLSX operator | ||||
|     autoExt: false --<< do not automatically add ".xlsx" extension! | ||||
|   } | ||||
| // highlight-end | ||||
| ) WHERE `Index` < 45 | ||||
| ``` | ||||
| 
 | ||||
| By default the workbook is parsed and `sheet_to_json` is used to pull data: | ||||
| 
 | ||||
| ```js | ||||
| (async() => { | ||||
|   const blob = await (await fetch("https://sheetjs.com/pres.numbers")).blob(); | ||||
|   const data = URL.createOjectURL(blob); | ||||
|   const aoo = await alasql.promise("SELECT * FROM XLSX(?, {autoExt: false}", [data]); | ||||
|   console.log(aoo); // [ { Name: "Bill Clinton", Index: 42 }, ...] | ||||
| })(); | ||||
| ``` | ||||
| 
 | ||||
| ### Writing Files | ||||
| 
 | ||||
| The `XLSX` "into" target calls `XLSX.writeFile` under the hood: | ||||
| 
 | ||||
| ```js | ||||
| const { promise: alasql } = require("alasql"); | ||||
| 
 | ||||
| (async() => { | ||||
|   const data = [ | ||||
|     { Name: "Bill Clinton", Index: 42 }, | ||||
|     { Name: "Someone Else", Index: 47 } | ||||
|   ]; | ||||
|   await alasql(`SELECT * INTO XLSX("PresMod5.xlsx") FROM ?`, [data]); | ||||
|   /* PresMod5.xlsx will be created */ | ||||
| })(); | ||||
| ``` | ||||
| 
 | ||||
| ## NodeJS | ||||
| 
 | ||||
| :::caution | ||||
| 
 | ||||
| @ -32,7 +209,7 @@ strategies for general data processing in AlaSQL expressions. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| #### Reading Files | ||||
| ### Reading Files | ||||
| 
 | ||||
| By default, the `XLSX` "from" target automatically adds a `.xlsx` extension.  To | ||||
| read files with an arbitrary filename, the `autoExt: false` option should be | ||||
| @ -55,12 +232,12 @@ By default the workbook is parsed and `sheet_to_json` is used to pull data: | ||||
| const { promise: alasql } = require("alasql"); | ||||
| 
 | ||||
| (async() => { | ||||
|   const aoo = await alasql(`SELECT * from XLSX("pres.xlsb", {autoExt: false})`); | ||||
|   const aoo = await alasql(`SELECT * from XLSX("pres.xlsx", {autoExt: false})`); | ||||
|   console.log(aoo); // [ { Name: "Bill Clinton", Index: 42 }, ...] | ||||
| })(); | ||||
| ``` | ||||
| 
 | ||||
| #### Writing Files | ||||
| ### Writing Files | ||||
| 
 | ||||
| The `XLSX` "into" target calls `XLSX.writeFile` under the hood: | ||||
| 
 | ||||
| @ -72,19 +249,13 @@ const { promise: alasql } = require("alasql"); | ||||
|     { Name: "Bill Clinton", Index: 42 }, | ||||
|     { Name: "Someone Else", Index: 47 } | ||||
|   ]; | ||||
|   await alasql(`SELECT * INTO XLSX("PresMod5.xlsb") FROM ?`, [data]); | ||||
|   /* PresMod5.xlsb will be created */ | ||||
|   await alasql(`SELECT * INTO XLSX("PresMod5.xlsx") FROM ?`, [data]); | ||||
|   /* PresMod5.xlsx will be created */ | ||||
| })(); | ||||
| ``` | ||||
| 
 | ||||
| ### NodeJS Example | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was tested on 2023 February 23 against AlaSQL 3.1.0 | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| 1) Create an empty folder for the project: | ||||
| 
 | ||||
| ```bash | ||||
|  | ||||
| @ -11,14 +11,17 @@ This demo assumes familiarity with Lightning Web Components.  Salesforce has a | ||||
| 
 | ||||
| :::caution | ||||
| 
 | ||||
| Some of the details may differ across releases of Salesforce. This demo is based | ||||
| on Lightning API version `57.0` and was last tested on 2023 April 09. | ||||
| 
 | ||||
| Salesforce may change the platform in backwards-incompatible ways, so the demo | ||||
| may require some adjustments.  The official documentation should be consulted. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 April 09 using Lightning API version `57.0`. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| ## Getting Started | ||||
| 
 | ||||
| This demo was built on a "Developer Edition" account. At the time of writing, an | ||||
|  | ||||
| @ -160,6 +160,12 @@ function SheetJSEnregistrez() { | ||||
| 
 | ||||
| ## Dropbox App | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2022 February 28. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| This demo requires a "Dropbox app": | ||||
| 
 | ||||
| 0) Create a Dropbox app through the Developer tools.  For this demo: | ||||
|  | ||||
							
								
								
									
										48
									
								
								docz/static/alasql/alasql.js
									
									
									
									
									
										Normal file
									
								
							
							
								
								
								
								
								
									
									
								
							
						
						
									
										48
									
								
								docz/static/alasql/alasql.js
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
		Loading…
	
		Reference in New Issue
	
	Block a user