diff --git a/docz/docs/03-example.mdx b/docz/docs/03-example.mdx index 1ec78d5..14610b6 100644 --- a/docz/docs/03-example.mdx +++ b/docz/docs/03-example.mdx @@ -144,6 +144,15 @@ worksheet["!cols"] = [ { wch: max_width } ]; In the browser, it will try to prompt the user to download the file. In NodeJS, it will write to the local directory. +:::note + +`XLSX.writeFileXLSX` only writes XLSX files and is recommended when the export +will always be in the `.xlsx` format. `writeFileXLSX` is more amenable to tree +shaking. This example uses `XLSX.writeFile` since `writeFileXLSX` does not +support other common export formats like `.xls` or `.xlsb` or `.csv`. + +::: + ```js XLSX.writeFile(workbook, "Presidents.xlsx"); ``` diff --git a/docz/docs/04-getting-started/03-demos/09-bundler.md b/docz/docs/04-getting-started/03-demos/09-bundler.md index c2c0baf..626370e 100644 --- a/docz/docs/04-getting-started/03-demos/09-bundler.md +++ b/docz/docs/04-getting-started/03-demos/09-bundler.md @@ -205,7 +205,7 @@ $ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} ```js title="esbrowser.js" // highlight-next-line -import { set_fs, utils, version, writeFile } from 'xlsx/xlsx.mjs'; +import { set_fs, utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs'; (async() => { /* fetch JSON data and parse */ @@ -234,7 +234,7 @@ const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10); worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ -writeFile(workbook, "Presidents.xlsx"); +writeFileXLSX(workbook, "Presidents.xlsx"); })(); ``` @@ -364,7 +364,7 @@ This demo follows the [Presidents Example](../../example). @@ -461,7 +461,7 @@ $ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} ```js title="index.js" // highlight-next-line -import { set_fs, utils, version, writeFile } from 'xlsx/xlsx.mjs'; +import { set_fs, utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs'; document.getElementById("xport").addEventListener("click", async() => { /* fetch JSON data and parse */ @@ -490,7 +490,7 @@ const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10); worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ -writeFile(workbook, "Presidents.xlsx"); +writeFileXLSX(workbook, "Presidents.xlsx"); }); ``` @@ -529,3 +529,99 @@ npx http-server build/ Click on "Click here to export" to generate a file. + +## Vite + +:::caution + +ViteJS adopted nascent `package.json` patterns. Version 0.18.10 implements the +patterns required for ViteJS 3.0.3. These patterns are evolving and a future +version of Vite may require more packaging changes. + +::: + +ViteJS 3.0.3 is known to work with SheetJS version 0.18.10. + +
Complete Example (click to show) + +1) Create a new ViteJS project: + +``` +npm create vite@latest +cd sheetjs-vite # (project name) +npm i +``` + +When prompted for **Project Name**, type **`sheetjs-vite`** + +When prompted for **Framework**, select **`vue`** then **`vue-ts`** + +2) Add the SheetJS dependency: + +
{`\
+$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ +3) Replace `src\components\HelloWorld.vue` with: + +```html title="src\components\HelloWorld.vue" + + + +``` + +4) Run `npm run dev` and test functionality by opening a web browser to +http://localhost:5173/ and clicking the button + +5) Run `npx vite build` and verify the generated pages work by running a local +web server in the `dist` folder: + +``` +npx http-server dist/ +``` + +Access http://localhost:8080 in your web browser. + +
+ diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index d3ad4a2..da95d39 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -62,4 +62,5 @@ The demo projects include small runnable examples and short explainers. - [`snowpack`](./bundler#snowpack) - [`systemjs`](https://github.com/SheetJS/SheetJS/tree/master/demos/systemjs/) - [`typescript`](https://github.com/SheetJS/SheetJS/tree/master/demos/typescript/) +- [`vite`](./bundler#vite) - [`webpack 2.x`](https://github.com/SheetJS/SheetJS/tree/master/demos/webpack/)