forked from sheetjs/docs.sheetjs.com
		
	dropbox
This commit is contained in:
		
							parent
							
								
									a6aba251e5
								
							
						
					
					
						commit
						57312901e1
					
				| @ -133,8 +133,8 @@ function exportFile() { | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last run on 2023 April 06 using `vue@3.2.47`.  When running | ||||
| `npm init`, the package `create-vue@3.6.1` was installed. | ||||
| This demo was last run on 2023 August 27 using `vue@3.3.4`.  When running | ||||
| `npm init`, the package `create-vue@3.7.3` was installed. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -209,8 +209,8 @@ function exportFile() { | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last run on 2023 April 06 using `vue@3.2.47`.  When running | ||||
| `npm init`, the package `create-vue@3.6.1` was installed. | ||||
| This demo was last run on 2023 August 27 using `vue@3.3.4`.  When running | ||||
| `npm init`, the package `create-vue@3.7.3` was installed. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -283,4 +283,4 @@ There is a shared component [`SheetJS-vue.js`](pathname:///vue/SheetJS-vue.js) | ||||
| The entire demo is designed to run in Internet Explorer and does not reflect | ||||
| modern design patterns. | ||||
| 
 | ||||
| ::: | ||||
| ::: | ||||
|  | ||||
| @ -1,5 +1,7 @@ | ||||
| --- | ||||
| title: Svelte | ||||
| title: Sheets in Svelte Sites | ||||
| sidebar_label: Svelte | ||||
| description: Build interactive websites with Svelte. Seamlessly integrate spreadsheets into your app using SheetJS. Bring Excel-powered workflows and data to the modern web. | ||||
| pagination_prev: demos/index | ||||
| pagination_next: demos/grid/index | ||||
| sidebar_position: 4 | ||||
| @ -8,17 +10,25 @@ sidebar_position: 4 | ||||
| import current from '/version.js'; | ||||
| import CodeBlock from '@theme/CodeBlock'; | ||||
| 
 | ||||
| Svelte is a JS library for building user interfaces. | ||||
| [Svelte](https://svelte.dev/) is a JavaScript library for building user | ||||
| interfaces. | ||||
| 
 | ||||
| This demo tries to cover common Svelte data flow ideas and strategies. Svelte | ||||
| familiarity is assumed. | ||||
| [SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing | ||||
| data from spreadsheets. | ||||
| 
 | ||||
| Other demos cover general Svelte deployments, including: | ||||
| This demo uses Svelte and SheetJS to process and generate spreadsheets. We'll | ||||
| explore how to load SheetJS in a Svelte component and compare common state | ||||
| models and data flow strategies. | ||||
| 
 | ||||
| :::note pass | ||||
| 
 | ||||
| This demo focuses on Svelte concepts. Other demos cover general deployments: | ||||
| 
 | ||||
| - [Static Site Generation powered by SvelteKit](/docs/demos/static/svelte) | ||||
| - [iOS applications powered by CapacitorJS](/docs/demos/mobile/capacitor) | ||||
| - [Desktop application powered by Wails](/docs/demos/desktop/wails) | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| ## Installation | ||||
| 
 | ||||
| @ -122,8 +132,8 @@ function exportFile() { | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last run on 2023 March 08 using `svelte@3.55.1`.  When running | ||||
| `npm create`, the package `create-vite@4.1.0` was installed. | ||||
| This demo was last run on 2023 August 27 using `svelte@4.2.0`.  When running | ||||
| `npm create`, the package `create-vite@4.4.1` was installed. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -200,8 +210,8 @@ function exportFile() { | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last run on 2023 March 08 using `svelte@3.55.1`.  When running | ||||
| `npm create`, the package `create-vite@4.1.0` was installed. | ||||
| This demo was last run on 2023 August 27 using `svelte@4.2.0`.  When running | ||||
| `npm create`, the package `create-vite@4.4.1` was installed. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -8,7 +8,7 @@ sidebar_position: 7 | ||||
| import current from '/version.js'; | ||||
| import CodeBlock from '@theme/CodeBlock'; | ||||
| 
 | ||||
| :::warning | ||||
| :::warning pass | ||||
| 
 | ||||
| This demo is for the legacy AngularJS framework (version 1). | ||||
| 
 | ||||
| @ -23,7 +23,7 @@ This demo is for the legacy AngularJS framework (version 1). | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last run on 2023 April 08 using AngularJS `1.5.0` | ||||
| This demo was last run on 2023 August 27 using AngularJS `1.8.2` | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -170,7 +170,7 @@ $scope.exportSheetJS = function() { | ||||
| <html ng-app="s5s"> | ||||
| <head> | ||||
|   <title>SheetJS + AngularJS</title> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> | ||||
|   <script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"></script> | ||||
|   <script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script> | ||||
| </head> | ||||
| @ -269,8 +269,8 @@ The HTML table can be directly exported with `XLSX.utils.table_to_book`: | ||||
| <html ng-app="s5s"> | ||||
| <head> | ||||
|   <title>SheetJS + AngularJS</title> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.js"></script> | ||||
|   <script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"></script> | ||||
|   <script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script> | ||||
| </head> | ||||
|  | ||||
| @ -77,6 +77,13 @@ provides ["Worker Threads"](#worker-threads) for this exact use case. | ||||
| 
 | ||||
| #### Express | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was verified on 2023 August 27 using `express-formidable@1.2.0` and | ||||
| ExpressJS `4.18.2` | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| The `express-formidable` middleware is powered by the `formidable` parser.  It | ||||
| adds a `files` property to the request. | ||||
| 
 | ||||
| @ -132,7 +139,7 @@ app.listen(+process.env.PORT||3000); | ||||
| 1) Install dependencies: | ||||
| 
 | ||||
| <CodeBlock language="bash">{`\ | ||||
| npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz express express-formidable`} | ||||
| npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz express@4.18.2 express-formidable@1.2.0`} | ||||
| </CodeBlock> | ||||
| 
 | ||||
| 2) Start server (note: it will not print anything to console when running) | ||||
| @ -158,6 +165,12 @@ It should prompt to download `SheetJSExpress.xlsx` | ||||
| 
 | ||||
| #### NestJS | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was verified on 2023 August 27 using NestJS `10.2.0` and Multer. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| [The NestJS docs](https://docs.nestjs.com/techniques/file-upload) have detailed | ||||
| instructions for file upload support. In the controller, the `path` property | ||||
| works with `XLSX.readFile`. | ||||
| @ -171,7 +184,7 @@ with a CSV output of the first sheet.  It will also respond to GET requests to | ||||
| ```ts title="src/sheetjs/sheetjs.controller.js" | ||||
| import { Controller, Get, Header, Post, StreamableFile, UploadedFile, UseInterceptors } from '@nestjs/common'; | ||||
| import { FileInterceptor } from '@nestjs/platform-express'; | ||||
| import { readFile, utils } from 'xlsx'; | ||||
| import { readFile, utils, write } from 'xlsx'; | ||||
| 
 | ||||
| @Controller('sheetjs') | ||||
| export class SheetjsController { | ||||
| @ -220,7 +233,7 @@ npx @nestjs/cli generate controller sheetjs | ||||
| ``` | ||||
| 
 | ||||
| 3) Add `multer` to the new module by editing `src/sheetjs/sheetjs.module.ts`. | ||||
| Changes are highlighted below: | ||||
| The highlighted lines should be added to the file: | ||||
| 
 | ||||
| ```ts title="src/sheetjs/sheetjs.module.ts" | ||||
| import { Module } from '@nestjs/common'; | ||||
| @ -269,7 +282,7 @@ It should prompt to download `SheetJSNest.xlsx` | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was verified on 2023 April 06 using `fastify@4.15.0` | ||||
| This demo was verified on 2023 August 27 using `fastify@4.22.0` | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -304,7 +317,7 @@ fastify.post('/', async(req, reply) => { | ||||
| }); | ||||
| ``` | ||||
| 
 | ||||
| :::caution | ||||
| :::caution pass | ||||
| 
 | ||||
| Out of the box, Fastify will return an error `FST_ERR_CTP_BODY_TOO_LARGE` when | ||||
| processing large spreadsheets (`statusCode 413`).  This is a Fastify issue. | ||||
| @ -420,7 +433,7 @@ the main server process. Body parsers like `formidable` will write uploaded | ||||
| files to the filesystem, and the file path should be passed to the worker (and | ||||
| the worker would be responsible for reading and cleaning up the files). | ||||
| 
 | ||||
| :::note | ||||
| :::note pass | ||||
| 
 | ||||
| The `child_process` module can also spawn [command-line tools](/docs/demos/cli). | ||||
| That approach is not explored in this demo. | ||||
| @ -431,9 +444,8 @@ That approach is not explored in this demo. | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 March 14. | ||||
| 
 | ||||
| Versions: NodeJS 18.15.0 + ExpressJS 4.18.2 + Formidable 2.1.1 | ||||
| This demo was last tested on 2023 August 27 with NodeJS 20.5.1 + ExpressJS | ||||
| 4.18.2 + Formidable 2.1.1 | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -188,16 +188,16 @@ const save_button_callback = async() => { | ||||
| 
 | ||||
| ## Complete Example | ||||
| 
 | ||||
| :::note pass | ||||
| :::note | ||||
| 
 | ||||
| This demo was tested in the following environments: | ||||
| 
 | ||||
| | OS and Version | Arch | Server    | Client   | Date       | | ||||
| |:---------------|:-----|:----------|:---------|:-----------| | ||||
| | macOS 13.4.1   | x64  | `v4.10.0` | `v3.8.2` | 2023-06-28 | | ||||
| | macOS 13.4.1   | ARM  | `v4.10.0` | `v3.8.2` | 2023-06-28 | | ||||
| | Windows 10     | x64  | `v4.7.0`  | `v3.6.0` | 2023-03-19 | | ||||
| | Linux (HoloOS) | x64  | `v4.7.0`  | `v3.6.0` |            | | ||||
| | OS and Version | Arch | Server    | Client    | Date       | | ||||
| |:---------------|:-----|:----------|:----------|:-----------| | ||||
| | macOS 13.5.1   | x64  | `v4.13.0` | `v3.11.0` | 2023-08-26 | | ||||
| | macOS 13.4.1   | ARM  | `v4.10.0` | `v3.8.2`  | 2023-06-28 | | ||||
| | Windows 10     | x64  | `v4.13.0` | `v3.11.0` | 2023-08-26 | | ||||
| | Linux (HoloOS) | x64  | `v4.13.0` | `v3.11.0` | 2023-08-26 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -231,6 +231,13 @@ curl -L -o resources/js/xlsx.full.min.js https://cdn.sheetjs.com/xlsx-${current} | ||||
|   ], | ||||
| ``` | ||||
| 
 | ||||
| :::note pass | ||||
| 
 | ||||
| There may be multiple `nativeAllowList` blocks in the configuration file. The | ||||
| line must be added to the first block. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| 4) Set up skeleton app and print version info: | ||||
| 
 | ||||
| - Replace the contents of `resources/index.html` with the following code: | ||||
|  | ||||
| @ -62,6 +62,7 @@ This demo was tested in the following deployments: | ||||
| |:-------------|:--------|:------------|:-----------| | ||||
| | `darwin-x64` | `2.0.1` | `20.1.0`    | 2023-05-08 | | ||||
| | `darwin-arm` | `2.0.1` | `20.2.0`    | 2023-06-05 | | ||||
| | `win10-x64`  | `2.1.1` | `16.20.2`   | 2023-08-27 | | ||||
| | `linux-x64`  | `2.0.1` | `20.1.0`    | 2023-05-08 | | ||||
| 
 | ||||
| </details> | ||||
| @ -138,20 +139,76 @@ This generates `xlsx-cli-linux`, `xlsx-cli-macos`, and `xlsx-cli-win.exe` . | ||||
| 
 | ||||
| Run `boxednode`: | ||||
| 
 | ||||
| <Tabs groupId="os"> | ||||
|   <TabItem value="unix" label="Linux/MacOS"> | ||||
| 
 | ||||
| ```bash | ||||
| npx boxednode@2.0.1 -s xlsx-cli.js -t xlsx-cli | ||||
| npx boxednode@2.1.1 -s xlsx-cli.js -t xlsx-cli | ||||
| ``` | ||||
| 
 | ||||
|   </TabItem> | ||||
|   <TabItem value="win" label="Windows"> | ||||
| 
 | ||||
| ```bash | ||||
| npx boxednode@2.1.1 -s xlsx-cli.js -t xlsx-cli.exe -n 16.20.2 | ||||
| ``` | ||||
| 
 | ||||
| :::info pass | ||||
| 
 | ||||
| The Windows 10 build requires Visual Studio with "Desktop development with C++" | ||||
| workload, Python 3, and NASM[^1]. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| :::caution pass | ||||
| 
 | ||||
| When the demo was last tested on Windows, the build failed: | ||||
| 
 | ||||
| ``` | ||||
| error MSB8020: The build tools for Visual Studio 2019 (Platform Toolset = 'v142') cannot be found. To build using the v142 build tools, please install Visual Studio 2019 build tools. | ||||
| ``` | ||||
| 
 | ||||
| This error was fixed by installing the `v142` build tools through the Visual | ||||
| Studio installer. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| :::caution pass | ||||
| 
 | ||||
| In the most recent Windows test against NodeJS `20.5.1`, the build failed due | ||||
| to an issue in the OpenSSL dependency: | ||||
| 
 | ||||
| ``` | ||||
| ...\node-v20.5.1\deps\openssl\openssl\crypto\info.c(176,16): error C2153: integer literals must have at least one digit [...\node-v20.5.1\deps\openssl\openssl.vcxproj] | ||||
| ``` | ||||
| 
 | ||||
| SheetJS libraries are compatible with NodeJS versions dating back to `v0.8`. The | ||||
| workaround is to select NodeJS `v16.20.2` using the `-n` flag. This version was | ||||
| was chosen since NodeJS `v18` upgraded the OpenSSL dependency. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|   </TabItem> | ||||
| </Tabs> | ||||
| 
 | ||||
| 4) Run the generated program, passing `pres.numbers` as the argument.  For | ||||
| 
 | ||||
| 
 | ||||
|   </TabItem> | ||||
| </Tabs> | ||||
| 
 | ||||
| 4) Run the generated program, passing `pres.numbers` as the argument. For | ||||
| example, `nexe` generates `xlsx-cli` in macOS so the command is: | ||||
| 
 | ||||
| ```bash | ||||
| ./xlsx-cli pres.numbers | ||||
| ``` | ||||
| 
 | ||||
| `nexe` generates `xlsx-cli.exe` in Windows, so the command is: | ||||
| 
 | ||||
| ```powershell | ||||
| .\xlsx-cli.exe pres.numbers | ||||
| ``` | ||||
| 
 | ||||
| ## V8 | ||||
| 
 | ||||
| The [V8](/docs/demos/engines/v8) demo covers standalone programs that embed the | ||||
| @ -288,3 +345,5 @@ The following demos for JS engines produce standalone programs: | ||||
| - [QuickJS](/docs/demos/engines/quickjs) | ||||
| - [Goja](/docs/demos/engines/goja) | ||||
| - [JavaScriptCore](/docs/demos/engines/jsc) | ||||
| 
 | ||||
| [^1]: Downloads can be found [at the main NASM project website](https://www.nasm.us/) | ||||
| @ -1,5 +1,6 @@ | ||||
| --- | ||||
| title: Dropbox | ||||
| title: Spreadsheets in Dropbox | ||||
| sidebar_label: Dropbox | ||||
| pagination_prev: demos/local/index | ||||
| pagination_next: demos/extensions/index | ||||
| --- | ||||
| @ -8,12 +9,27 @@ pagination_next: demos/extensions/index | ||||
|   <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="4ysmnhy8wtm6k3w"></script> | ||||
| </head> | ||||
| 
 | ||||
| Dropbox is a file hosting service that offers APIs for programmatic file access. | ||||
| [Dropbox](https://www.dropbox.com/) is a file hosting service that offers APIs | ||||
| for programmatic file access. | ||||
| 
 | ||||
| [SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing | ||||
| data from spreadsheets. | ||||
| 
 | ||||
| This demo uses SheetJS to read and write spreadsheets stored on Dropbox. We'll | ||||
| explore two Dropbox API workflows: | ||||
| 
 | ||||
| - A "Chooser"[^1] application allows users to select files from their Dropbox | ||||
| accounts. This demo will fetch and parse the selected file. | ||||
| 
 | ||||
| - A "Saver"[^2] application allows users to save a generated spreadsheet to | ||||
| their Dropbox account. This demo will generate a XLS workbook using SheetJS. | ||||
| 
 | ||||
| ## Integration Details | ||||
| 
 | ||||
| "Dropbox Apps" are the standard way to interact with the service.  The | ||||
| ["Dropbox App"](#dropbox-app) section describes how this demo was configured. | ||||
| 
 | ||||
| :::note | ||||
| :::info pass | ||||
| 
 | ||||
| The Dropbox API script is loaded in this page with | ||||
| 
 | ||||
| @ -29,23 +45,59 @@ The `data-app-key` used in this demo is a "Development" key associated with the | ||||
| 
 | ||||
| The live demos require a Dropbox account. | ||||
| 
 | ||||
| ## Reading Files | ||||
| ### Reading Files | ||||
| 
 | ||||
| "Chooser" is a small library that lets users select a file from their account. | ||||
| `Dropbox.createChooseButton` is a function that accepts an options argument and | ||||
| returns a DOM element that should be added to the page: | ||||
| 
 | ||||
| ### Live Demo | ||||
| ```js | ||||
| var button = Dropbox.createChooseButton({ | ||||
|   /* ... options described below ... */ | ||||
| }); | ||||
| document.appendChild(button); | ||||
| ``` | ||||
| 
 | ||||
| The button must have the following options: | ||||
| The following options must be set: | ||||
| 
 | ||||
| - `multiselect: false` ensures only one file can be selected | ||||
| - `folderselect: false` limits selection to real files | ||||
| - `linkType: "direct"` ensures the link points to a raw file | ||||
| - `success` method is called when the user selects a file | ||||
| 
 | ||||
| When a file is selected, the `success` callback will receive an array of files | ||||
| (even if `multiselect` is disabled).  Each file object has a `link` file which | ||||
| corresponds to a temporary URL that can be fetched. | ||||
| The following options are optional: | ||||
| 
 | ||||
| :::caution | ||||
| - `extensions: ['.xlsx', '.xls']` limits the file types for selection | ||||
| 
 | ||||
| #### Chooser Callback | ||||
| 
 | ||||
| The `success` callback method receives an array of File objects even if only one | ||||
| file is selected. This file object has the following properties: | ||||
| 
 | ||||
| - `name` is the name of the selected file | ||||
| - `link` is a temporary URL that can be fetched | ||||
| 
 | ||||
| This demo fetches the link using the `fetch` API, parses the raw data using the | ||||
| SheetJS `read` function[^3] and generates a HTML table using `sheet_to_html`[^4] | ||||
| 
 | ||||
| ```js | ||||
| async(files) => { | ||||
|   /* get file entry -- note that dropbox API always passes an array */ | ||||
|   var file = files[0]; | ||||
|   console.log(`Selected ${file.name} ID=${file.id}`); | ||||
| 
 | ||||
|   /* fetch file and parse */ | ||||
|   var wb = XLSX.read(await (await fetch(file.link)).arrayBuffer()); | ||||
| 
 | ||||
|   /* convert first sheet to HTML table and add to page */ | ||||
|   var html = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]); | ||||
|   console.log(html); | ||||
| } | ||||
| ``` | ||||
| 
 | ||||
| #### Chooser Live Demo | ||||
| 
 | ||||
| :::caution pass | ||||
| 
 | ||||
| If the live demo shows a message | ||||
| 
 | ||||
| @ -93,9 +145,26 @@ function SheetJSChoisissez() { | ||||
| } | ||||
| ``` | ||||
| 
 | ||||
| ## Writing Files | ||||
| ### Writing Files | ||||
| 
 | ||||
| :::caution | ||||
| "Saver" is a small library that lets users save files to their account. | ||||
| `Dropbox.createSaveButton` is a function that accepts three arguments and | ||||
| returns a DOM element that should be added to the page: | ||||
| 
 | ||||
| ```js | ||||
| var button = Dropbox.createSaveButton(url, filename, options); | ||||
| /* add button to page */ | ||||
| btn.current.appendChild(button); | ||||
| ``` | ||||
| 
 | ||||
| `filename` will be the recommended filename in the Save window. | ||||
| 
 | ||||
| The options object supports two callbacks: `success` (if the save succeeded) and | ||||
| `cancel` (if the user cancels without saving). | ||||
| 
 | ||||
| #### URL | ||||
| 
 | ||||
| :::caution pass | ||||
| 
 | ||||
| The Dropbox API was not designed for writing files that are created in the web | ||||
| browser.  The Data URI approach is a neat workaround but should not be used in | ||||
| @ -104,18 +173,49 @@ using NodeJS and generate a proper URL for Dropbox to fetch. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| "Saver" is a small library that lets users save files to their account. | ||||
| The Dropbox API is designed to fetch data from a user-specified URL. Files are | ||||
| not included in the request! | ||||
| 
 | ||||
| ### Live Demo | ||||
| The SheetJS workaround involves the Data URI scheme[^5]. The main steps are: | ||||
| 
 | ||||
| The file must be written before the Save button is created. Unfortunately the | ||||
| API does not accept data in the POST body, so the workaround is to create a data | ||||
| URI by writing with the `base64` type and prepending the URI metadata. | ||||
| 1) Write a workbook using the SheetJS `write`[^6] method. The `type: "base64"` | ||||
| option instructs the method to return a Base64-encoded string. | ||||
| 
 | ||||
| ```js | ||||
| /* write XLS workbook (Base64 string) */ | ||||
| const b64 = XLSX.write(workbook, { type: "base64", bookType: "xls" }); | ||||
| ``` | ||||
| 
 | ||||
| 2) Construct a Data URL by prepending the `data` header: | ||||
| 
 | ||||
| ```js | ||||
| /* create data URI */ | ||||
| const url = "data:application/vnd.ms-excel;base64," + b64; | ||||
| ``` | ||||
| 
 | ||||
| 3) Create a button and add it to the page: | ||||
| 
 | ||||
| ```js | ||||
| /* create save button using the concise function call */ | ||||
| var button = Dropbox.createSaveButton( url, "SheetJSDropbox.xls", { | ||||
|   success: () => setMsg("File saved successfully!"), | ||||
|   cancel: () => setMsg("User Canceled Selection!"), | ||||
| }); | ||||
| document.appendChild(button); | ||||
| ``` | ||||
| 
 | ||||
| :::info | ||||
| 
 | ||||
| The file must be written before the Save button is created. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| #### Saver Live Demo | ||||
| 
 | ||||
| This demo seeds data by fetching a file and writing to HTML table. The generated | ||||
| table is scraped to create a new workbook that is written to XLS. | ||||
| 
 | ||||
| :::caution | ||||
| :::caution pass | ||||
| 
 | ||||
| If the live demo shows a message | ||||
| 
 | ||||
| @ -164,25 +264,36 @@ function SheetJSEnregistrez() { | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 February 28. | ||||
| This demo was last tested on 2023 August 26. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| This demo requires a "Dropbox app": | ||||
| 
 | ||||
| 0) Create a Dropbox app through the Developer tools.  For this demo: | ||||
| 0) Create a Dropbox account and verify the associated email address. This demo | ||||
| has been tested with a free Dropbox Basic plan account. The app installation | ||||
| step can be safely skipped. | ||||
| 
 | ||||
| - "Choose an APU": "Scoped access" | ||||
| 1) Create a Dropbox app in the Developer panel. | ||||
| 
 | ||||
| Click the `᎒᎒᎒` icon > App Center. In the next page, click "Build an App". In | ||||
| the next page, click "Create Apps". | ||||
| 
 | ||||
| In the App creation wizard, select the following options: | ||||
| 
 | ||||
| - "Choose an API": "Scoped access" | ||||
| - "Choose the type of access you need": "Full Dropbox" | ||||
| - "Name": (enter any name) "SheetJS Docs" | ||||
| 
 | ||||
| :::caution | ||||
| :::caution pass | ||||
| 
 | ||||
| The Dropbox API Terms and Conditions should be reviewed before acceptance. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| 1) Configure the Dropbox app in the Developer tools. | ||||
| Click "Create App" to create the app. | ||||
| 
 | ||||
| 2) Configure the Dropbox app in the Developer tools. | ||||
| 
 | ||||
| The following permissions should be selected in the "Permissions" tab | ||||
| 
 | ||||
| @ -195,3 +306,14 @@ In the settings tab, under "Chooser / Saver / Embedder domains", the desired | ||||
| public domains should be added. `localhost` must also be added for development | ||||
| use (it is not automatically enabled). | ||||
| 
 | ||||
| For public use, select "Enable Additional Users". | ||||
| 
 | ||||
| 3) Copy the "App key" and add it to the `data-app-key` attribute of the Dropbox | ||||
| integration script reference. | ||||
| 
 | ||||
| [^1]: See ["Chooser"](https://www.dropbox.com/developers/chooser) in the Dropbox Developers Documentation | ||||
| [^2]: See ["Saver"](https://www.dropbox.com/developers/saver) in the Dropbox Developers Documentation | ||||
| [^3]: See [`read` in "Reading Files"](/docs/api/parse-options) | ||||
| [^4]: See [`sheet_to_html` in "Utilities"](/docs/api/utilities/html#html-table-output) | ||||
| [^5]: See ["Data URLs"](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) in the "MDN web docs" | ||||
| [^6]: See [`writeFile` in "Writing Files"](/docs/api/write-options) | ||||
| @ -127,7 +127,7 @@ This demo was tested in the following deployments: | ||||
| | `11.8.82`     | `darwin-x64` | macOS 13.5.1 | `clang 14.0.3`   | 2023-08-26 | | ||||
| | `11.8.82`     | `darwin-arm` | macOS 13.5.1 | `clang 14.0.3`   | 2023-08-26 | | ||||
| | `11.8.82`     | `win10-x64`  | Windows 10   | `CL 19.37.32822` | 2023-08-26 | | ||||
| | `11.3.244.11` | `linux-x64`  | HoloOS 3.4.6 | `gcc 12.2.0`     | 2023-05-20 | | ||||
| | `11.8.82`     | `linux-x64`  | HoloOS 3.4.8 | `gcc 12.2.0`     | 2023-08-26 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -435,7 +435,7 @@ fatal: cannot set up tracking information; starting point 'refs/tags/11.8.82' is | ||||
| 6) Build the static library. | ||||
| 
 | ||||
| <Tabs groupId="triple"> | ||||
|   <TabItem value="darwin-x64" label="Intel Mac"> | ||||
|   <TabItem value="darwin-x64" label="Intel Mac / Linux"> | ||||
| 
 | ||||
| ```bash | ||||
| tools/dev/v8gen.py x64.release.sample | ||||
| @ -504,7 +504,7 @@ treat_warnings_as_errors = false | ||||
| 7) Ensure the sample `hello-world` compiles and runs: | ||||
| 
 | ||||
| <Tabs groupId="triple"> | ||||
|   <TabItem value="darwin-x64" label="Intel Mac"> | ||||
|   <TabItem value="darwin-x64" label="Intel Mac / Linux"> | ||||
| 
 | ||||
| ```bash | ||||
| g++ -I. -Iinclude samples/hello-world.cc -o hello_world -fno-rtti -lv8_monolith \ | ||||
| @ -572,7 +572,7 @@ cp ~/dev/v8/v8/samples/hello-world.cc . | ||||
| 10) Create symbolic links to the `include` headers and `obj` library folders: | ||||
| 
 | ||||
| <Tabs groupId="triple"> | ||||
|   <TabItem value="darwin-x64" label="Intel Mac"> | ||||
|   <TabItem value="darwin-x64" label="Intel Mac / Linux"> | ||||
| 
 | ||||
| ```bash | ||||
| ln -s ~/dev/v8/v8/include | ||||
|  | ||||
| @ -96,6 +96,8 @@ This demo was tested in the following deployments: | ||||
| |:-------------|:-----------|:-----------|:-----------| | ||||
| | `darwin-x64` | `28ee0ee`  | `1.19.3`   | 2023-06-05 | | ||||
| | `darwin-arm` | `28ee0ee`  | `1.20.4`   | 2023-06-05 | | ||||
| | `win10-x64`  | `81d7606`  | `1.20.2`   | 2023-08-27 | | ||||
| | `linux-x64`  | `81d7606`  | `1.21.0`   | 2023-08-27 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -96,12 +96,13 @@ This demo was tested in the following deployments: | ||||
| 
 | ||||
| | OpenJDK | Nashorn         | Date       | | ||||
| |:--------|:----------------|:-----------| | ||||
| | 20.0.1  | 15.4 standalone | 2023-05-21 | | ||||
| | 19.0.2  | 15.4 standalone | 2023-05-21 | | ||||
| | 17.0.6  | 15.4 standalone | 2023-05-21 | | ||||
| | 15.0.10 | 15.4 standalone | 2023-05-21 | | ||||
| | 11.0.19 | Built-in        | 2023-05-21 | | ||||
| | 1.8.0   | Built-in        | 2023-05-21 | | ||||
| | 21-rc34 | 15.4 standalone | 2023-08-28 | | ||||
| | 20.0.2  | 15.4 standalone | 2023-08-28 | | ||||
| | 19.0.2  | 15.4 standalone | 2023-08-28 | | ||||
| | 17.0.8  | 15.4 standalone | 2023-08-28 | | ||||
| | 15.0.10 | 15.4 standalone | 2023-08-28 | | ||||
| | 11.0.20 | Built-in        | 2023-08-28 | | ||||
| | 1.8.0   | Built-in        | 2023-08-28 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -328,7 +328,7 @@ first worksheet name, and the contents of the first sheet as CSV rows. | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 March 11 against QuickJS commit `2788d71`. | ||||
| This demo was last tested on 2023 August 26 against QuickJS commit `2788d71`. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -338,17 +338,32 @@ This demo was tested in the following deployments: | ||||
| 
 | ||||
| | Architecture | Git Commit | Date       | | ||||
| |:-------------|:-----------|:-----------| | ||||
| | `darwin-x64` | `70af78b`  | 2023-08-02 | | ||||
| | `darwin-x64` | `70af78b`  | 2023-08-27 | | ||||
| | `darwin-arm` | `869312f`  | 2023-06-05 | | ||||
| | `linux-x64`  | `70af78b`  | 2023-08-27 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| 0) Install build dependencies: | ||||
| 0) Install [dependencies](https://hermesengine.dev/docs/building-and-running/#dependencies) | ||||
| 
 | ||||
| <details><summary><b>Installation Notes</b> (click to show)</summary> | ||||
| 
 | ||||
| The official guidance[^5] has been verified in macOS and HoloOS (Linux). | ||||
| 
 | ||||
| On macOS: | ||||
| 
 | ||||
| ```bash | ||||
| brew install icu4c cmake ninja | ||||
| ``` | ||||
| 
 | ||||
| On HoloOS (and other Arch Linux distros): | ||||
| 
 | ||||
| ```bash | ||||
| sudo pacman -Syu cmake git ninja icu python zip readline | ||||
| ``` | ||||
| 
 | ||||
| </details> | ||||
| 
 | ||||
| 1) Make a project directory: | ||||
| 
 | ||||
| ```bash | ||||
| @ -405,7 +420,7 @@ contents of the first sheet as CSV rows. | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was last tested on 2023 May 30 against Hermes version `0.11.0`. | ||||
| This demo was last tested on 2023 August 27 against Hermes version `0.11.0`. | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| @ -469,3 +484,4 @@ If successful, the script will print CSV data from the test file. | ||||
| [^2]: See ["Workbook Object"](/docs/csf/book) | ||||
| [^3]: See ["Workbook Object"](/docs/csf/book) | ||||
| [^4]: See [`sheet_to_csv` in "Utilities"](/docs/api/utilities/csv#csv-output) | ||||
| [^5]: See ["Dependencies" in "Building and Running"](https://hermesengine.dev/docs/building-and-running/#dependencies) in the Hermes Documentation | ||||
| @ -71,6 +71,7 @@ This demo was tested in the following deployments: | ||||
| |:-------------|:---------|:--------|:-----------| | ||||
| | `darwin-x64` | `2.7.6`  | `2.8.1` | 2023-07-24 | | ||||
| | `darwin-arm` | `2.6.10` | `2.8.1` | 2023-07-24 | | ||||
| | `linux-x64`  | `3.0.4`  | `2.8.1` | 2023-08-27 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -123,7 +123,7 @@ This demo was tested in the following deployments: | ||||
| | `darwin-x64` | `c3ead3f`  | 2023-08-26 | | ||||
| | `darwin-arm` | `c3ead3f`  | 2023-08-26 | | ||||
| | `win10-x64`  | `c3ead3f`  | 2023-08-26 | | ||||
| | `linux-x64`  | `c3ead3f`  | 2023-07-05 | | ||||
| | `linux-x64`  | `c3ead3f`  | 2023-08-27 | | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -102,7 +102,7 @@ write_file("SheetJE.fods", $fods); | ||||
| 
 | ||||
| :::note | ||||
| 
 | ||||
| This demo was tested on 2023 February 12 against JE 0.066 | ||||
| This demo was tested on 2023-08-26 against JE 0.066 | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
|  | ||||
| @ -5,7 +5,7 @@ | ||||
| <head> | ||||
|   <title>SheetJS + AngularJS</title> | ||||
|   <!-- Angular --> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> | ||||
|   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> | ||||
| 
 | ||||
|   <!-- SheetJS library --> | ||||
|   <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script> | ||||
|  | ||||
| @ -1,6 +1,15 @@ | ||||
| # Note: The official Hermes documentation includes zero guidance on embedding.
 | ||||
| # Tested against commit 70af78ba69391645749b40a3674d7321c4d6177a
 | ||||
| 
 | ||||
| MYCC=llvm-g++ | ||||
| POSTAMBLE=-framework CoreFoundation | ||||
| 
 | ||||
| UNAME__S := $(shell uname -s) | ||||
| ifeq ($(UNAME__S),Linux) | ||||
| MYCC=g++ | ||||
| POSTAMBLE=-licuuc -licudata -licuio -licutu -licui18n | ||||
| endif | ||||
| 
 | ||||
| .PHONY: doit | ||||
| doit: sheetjs-hermes | ||||
| 	if [ ! -e xlsx.full.min.js ]; then curl -LO https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js; fi | ||||
| @ -18,10 +27,17 @@ clean-all: clean | ||||
| # This sequence was cobbled together by linking against every artifact.
 | ||||
| # Some of these lines are likely extraneous
 | ||||
| sheetjs-hermes: sheetjs-hermes.cpp init | ||||
| 	llvm-g++ $< -o $@ -std=gnu++17  \
 | ||||
| 	$(MYCC) $< -o $@ -std=gnu++17  \
 | ||||
| 		-Ihermes/include/ -Ihermes/API/ -Ihermes/API/jsi -Ihermes/public \
 | ||||
| 		-Lbuild_release/API/hermes/ -lhermesapi -lcompileJS -lsynthTrace -lsynthTraceParser -ltimerStats -ltraceInterpreter \
 | ||||
| 		-Lbuild_release/external/dtoa/ -ldtoa \
 | ||||
| 		-Lbuild_release/API/hermes/  -lsynthTrace -lsynthTraceParser \
 | ||||
| 		-lhermesapi \
 | ||||
| 		-Lbuild_release/lib/VM/ -lhermesVMRuntime \
 | ||||
| 		-Lbuild_release/lib/BCGen/HBC/ -lhermesHBCBackend \
 | ||||
| 		-Lbuild_release/lib/BCGen/ -lhermesBackend \
 | ||||
| 		-Lbuild_release/lib/SourceMap/ -lhermesSourceMap \
 | ||||
| 		-Lbuild_release/lib/Parser/ -lhermesParser \
 | ||||
| 		-Lbuild_release/lib/Platform/Unicode/ -lhermesPlatformUnicode \
 | ||||
| 		-lcompileJS -ltimerStats -ltraceInterpreter \
 | ||||
| 		-Lbuild_release/external/llvh/lib/Demangle/ -lLLVHDemangle \
 | ||||
| 		-Lbuild_release/external/llvh/lib/Support/ -lLLVHSupport \
 | ||||
| 		-Lbuild_release/jsi/ -ljsi \
 | ||||
| @ -30,8 +46,6 @@ sheetjs-hermes: sheetjs-hermes.cpp init | ||||
| 		-Lbuild_release/lib/ADT -lhermesADT \
 | ||||
| 		-Lbuild_release/lib/AST/ -lhermesAST \
 | ||||
| 		-Lbuild_release/lib/AST2JS/ -lhermesAST2JS \
 | ||||
| 		-Lbuild_release/lib/BCGen/ -lhermesBackend \
 | ||||
| 		-Lbuild_release/lib/BCGen/HBC/ -lhermesHBCBackend \
 | ||||
| 		-Lbuild_release/lib/CompilerDriver/ -lhermesCompilerDriver \
 | ||||
| 		-Lbuild_release/lib/ConsoleHost/ -lhermesConsoleHost \
 | ||||
| 		-Lbuild_release/lib/DependencyExtractor/ -lhermesDependencyExtractor \
 | ||||
| @ -39,19 +53,16 @@ sheetjs-hermes: sheetjs-hermes.cpp init | ||||
| 		-Lbuild_release/lib/FrontEndDefs/ -lhermesFrontEndDefs \
 | ||||
| 		-Lbuild_release/lib/Inst/ -lhermesInst \
 | ||||
| 		-Lbuild_release/lib/InternalBytecode/ -lhermesInternalBytecode \
 | ||||
| 		-Lbuild_release/lib/Parser/ -lhermesParser \
 | ||||
| 		-Lbuild_release/lib/Platform/ -lhermesPlatform \
 | ||||
| 		-Lbuild_release/lib/Platform/Intl/ -lhermesBCP47Parser \
 | ||||
| 		-Lbuild_release/lib/Platform/Unicode/ -lhermesPlatformUnicode \
 | ||||
| 		-Lbuild_release/lib/Regex/ -lhermesRegex \
 | ||||
| 		-Lbuild_release/lib/SourceMap/ -lhermesSourceMap \
 | ||||
| 		-Lbuild_release/lib/Support/ -lhermesSupport \
 | ||||
| 		-Lbuild_release/lib/VM/ -lhermesVMRuntime \
 | ||||
| 		-Lbuild_release/public/hermes/Public -lhermesPublic \
 | ||||
| 		-Lhermes/external/flowparser/ -lflowparser-mac \
 | ||||
| 		-framework CoreFoundation | ||||
| 		-Lbuild_release/external/dtoa/ -ldtoa \
 | ||||
| 		$(POSTAMBLE) | ||||
| 
 | ||||
| .PHONY: init | ||||
| init: | ||||
| 	if [ ! -e hermes ]; then git clone https://github.com/facebook/hermes.git; cd hermes; git checkout 70af78ba69391645749b40a3674d7321c4d6177a; cd ..; fi | ||||
| 	if [ ! -e build_release ]; then cmake -S hermes -B build_release -G Ninja -DCMAKE_BUILD_TYPE=Release; cmake --build ./build_release; fi | ||||
| 	if [ ! -e build_release ]; then cmake -S hermes -B build_release -G Ninja -DCMAKE_BUILD_TYPE=Release; cmake --build ./build_release; fi | ||||
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 25 KiB | 
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 44 KiB | 
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 9.1 KiB | 
		Loading…
	
		Reference in New Issue
	
	Block a user