diff --git a/docz/docs/02-getting-started/01-installation/05-extendscript.md b/docz/docs/02-getting-started/01-installation/05-extendscript.md index 01473fa..2d7fd3f 100644 --- a/docz/docs/02-getting-started/01-installation/05-extendscript.md +++ b/docz/docs/02-getting-started/01-installation/05-extendscript.md @@ -21,3 +21,7 @@ After downloading the script, it can be directly referenced with `#include`: ```c #include "xlsx.extendscript.js" ``` + +For local deployments, the scripts can be placed in the `Scripts` folder. For +Photoshop CS6 on Windows 10, the path is typically +`C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts` diff --git a/docz/docs/03-demos/43-ml.mdx b/docz/docs/03-demos/43-ml.mdx index 92a32c6..b1ca9bb 100644 --- a/docz/docs/03-demos/43-ml.mdx +++ b/docz/docs/03-demos/43-ml.mdx @@ -1,5 +1,6 @@ --- title: Typed Arrays and ML +pagination_next: demos/hosting/index --- diff --git a/docz/docs/03-demos/44-hosting/01-dropbox.mdx b/docz/docs/03-demos/44-hosting/01-dropbox.mdx new file mode 100644 index 0000000..14bb310 --- /dev/null +++ b/docz/docs/03-demos/44-hosting/01-dropbox.mdx @@ -0,0 +1,185 @@ +--- +title: Dropbox +pagination_prev: demos/ml +pagination_next: solutions/input +--- + + + + + +Dropbox is a file hosting service that offers APIs for programmatic file access. + +"Dropbox Apps" are the standard way to interact with the service. The +["Dropbox App"](#dropbox-app) section describes how this demo was configured. + +:::note + +The Dropbox API script is loaded in this page with + +```html + +``` + +The `data-app-key` used in this demo is a "Development" key associated with the +`localhost` and `docs.sheetjs.com` domains. Dropbox API does not require +"Production" approval for the Chooser or Saver. + +::: + +The live demos require a Dropbox account. + +## Reading Files + +"Chooser" is a small library that lets users select a file from their account. + +### Live Demo + +:::note + +The Dropbox API script is loaded in this page with + +```html + +``` + +The specific App Key used in this demo is a "Development" key associated with +the `localhost` and `docs.sheetjs.com` domains. Dropbox API does not require +"Production" approval for the Chooser. + +::: + +The button must have the following options: + +- `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 + +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. + +If the live demo shows a message about `Dropbox` being undefined, please reload +this demo page. + +```jsx live +function SheetJSChoisissez() { + const [msg, setMsg] = React.useState("Press the button to show a Chooser"); + const btn = useRef(), tbl = useRef(); + React.useEffect(() => { + /* create button */ + var button = Dropbox.createChooseButton({ + /* required settings */ + multiselect: false, + folderselect: false, + linkType: "direct", + /* optional settings */ + extensions: ['.xlsx', '.xls', '.numbers'], // list of extensions + + /* event handlers */ + cancel: () => setMsg("User Canceled Selection!"), + success: async(files) => { + /* get file entry -- note that dropbox API always passes an array */ + var file = files[0]; + setMsg(`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 */ + tbl.current.innerHTML = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]); + } + }); + /* add button to page */ + btn.current.appendChild(button); + }, []); + return ( <>{msg}
); +} +``` + +## Writing Files + +:::caution + +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 +production for larger files. It is better to create the files in the server +using NodeJS and generate a proper URL for Dropbox to fetch. + +::: + +"Saver" is a small library that lets users save files to their account. + +### Live Demo + +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. + +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. + +If the live demo shows a message about `Dropbox` being undefined, please reload +this demo page. + +```jsx live +function SheetJSEnregistrez() { + const [msg, setMsg] = React.useState("Press the button to write XLS file"); + const btn = useRef(), tbl = useRef(); + React.useEffect(async() => { + /* fetch data and write table (sample data) */ + const f = await(await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer(); + const wb = XLSX.read(f); + tbl.current.innerHTML = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]); + + /* create workbook from table */ + const table = tbl.current.getElementsByTagName("TABLE")[0]; + const new_wb = XLSX.utils.table_to_book(table); + + /* write XLS workbook (Base64 string) */ + const b64 = XLSX.write(new_wb, { type: "base64", bookType: "xls" }); + + /* create data URI */ + const url = "data:application/vnd.ms-excel;base64," + b64; + + /* 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!"), + }); + /* add button to page */ + btn.current.appendChild(button); + }, []); + return ( <>{msg}
); +} +``` + +## Dropbox App + +This demo requires a "Dropbox app": + +0) Create a Dropbox app through the Developer tools. For this demo: + +- "Choose an APU": "Scoped access" +- "Choose the type of access you need": "Full Dropbox" +- "Name": (enter any name) "SheetJS Docs" + +:::caution + +The Dropbox API Terms and Conditions should be reviewed before acceptance. + +::: + +1) Configure the Dropbox app in the Developer tools. + +The following permissions should be selected in the "Permissions" tab + +- `files.metadata.write` (View and edit information about your Dropbox files and folders) +- `files.metadata.read` (View information about your Dropbox files and folders) +- `files.content.write` (Edit content of your Dropbox files and folders) +- `files.content.read` (View content of your Dropbox files and folders) + +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). + diff --git a/docz/docs/03-demos/44-hosting/_category_.json b/docz/docs/03-demos/44-hosting/_category_.json new file mode 100644 index 0000000..e0c2fe2 --- /dev/null +++ b/docz/docs/03-demos/44-hosting/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "File Hosting Services", + "position": 44, + "collapsed": false +} \ No newline at end of file diff --git a/docz/docs/03-demos/44-hosting/index.md b/docz/docs/03-demos/44-hosting/index.md new file mode 100644 index 0000000..84c627e --- /dev/null +++ b/docz/docs/03-demos/44-hosting/index.md @@ -0,0 +1,20 @@ +--- +title: File Hosting Services +pagination_prev: demos/ml +pagination_next: solutions/input +--- + +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + +File hosting services provide simple solutions for storing data, synchronizing +files across devices, and sharing with specific users or customers. + +
    {useCurrentSidebarCategory().items.map(item => { + const listyle = (item.customProps?.icon) ? { + listStyleImage: `url("${item.customProps.icon}")` + } : {}; + return (
  • + {item.label}{item.customProps?.summary && (" - " + item.customProps.summary)} +
    • ); +})}
diff --git a/docz/docs/03-demos/45-git.md b/docz/docs/03-demos/45-git.md index 72b0f77..a518a6d 100644 --- a/docz/docs/03-demos/45-git.md +++ b/docz/docs/03-demos/45-git.md @@ -1,5 +1,7 @@ --- title: Data in Version Control +pagination_prev: demos/hosting/index +pagination_next: solutions/input --- Git is a popular system for organizing a historical record of source code and @@ -155,8 +157,6 @@ This was tested on 2022 November 08 using the GitHub UI. ::: -
Complete Example (click to show) - 0) Create a free GitHub account or sign into the GitHub web interface. 1) Create a new repository (click the "+" icon in the upper-right corner). @@ -263,4 +263,3 @@ jobs: The update process will run once an hour. If you return in a few hours and refresh the page, there should be more commits in the selection list. -
\ No newline at end of file diff --git a/docz/docs/03-demos/index.md b/docz/docs/03-demos/index.md index 32c0a04..6fb9ffe 100644 --- a/docz/docs/03-demos/index.md +++ b/docz/docs/03-demos/index.md @@ -1,5 +1,6 @@ --- pagination_prev: getting-started/index +pagination_next: solutions/input hide_table_of_contents: true --- @@ -77,6 +78,11 @@ run in the web browser, demos will include interactive examples. - [`NetSuite SuiteScript`](/docs/demos/cloud/netsuite) - [`Salesforce Lightning Web Components`](/docs/demos/cloud/salesforce) +### File Hosting Services + +- [`Dropbox`](/docs/demos/hosting/dropbox) +- [`Git`](/docs/demos/git) + ### Platforms and Integrations - [`Command-Line Tools`](/docs/demos/cli) diff --git a/docz/docs/06-solutions/01-input.md b/docz/docs/06-solutions/01-input.md index a0d2108..41767a2 100644 --- a/docz/docs/06-solutions/01-input.md +++ b/docz/docs/06-solutions/01-input.md @@ -1,5 +1,6 @@ --- sidebar_position: 1 +pagination_prev: demos/index --- # Data Import