forked from sheetjs/docs.sheetjs.com
vite-loader
This commit is contained in:
parent
32f1324e30
commit
62cfee92ef
@ -102,6 +102,102 @@ in the parsing logic, issues should then be raised with the SheetJS project.
|
||||
|
||||
:::
|
||||
|
||||
## ViteJS
|
||||
|
||||
:::note
|
||||
|
||||
Library integration in ViteJS is covered in ["Bundlers" demo](./bundler#vite)
|
||||
|
||||
:::
|
||||
|
||||
ViteJS supports static asset imports, but the default raw loader interprets data
|
||||
as UTF-8 strings. This corrupts binary formats like XLSX and XLS, but a custom
|
||||
loader can override the default behavior.
|
||||
|
||||
For a pure static site, a plugin can load data into an array of row objects. The
|
||||
SheetJS work is performed in the plugin. The library is not loaded in the page!
|
||||
|
||||
```js title="vite.config.js"
|
||||
import { readFileSync } from 'fs';
|
||||
import { read, utils } from 'xlsx';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
assetsInclude: ['**/*.xlsx'], // mark that xlsx file should be treated as assets
|
||||
|
||||
plugins: [
|
||||
{ // this plugin handles ?sheetjs tags
|
||||
name: "vite-sheet",
|
||||
transform(code, id) {
|
||||
if(!id.match(/\?sheetjs$/)) return;
|
||||
var path = id.replace(/\?sheetjs/, "");
|
||||
var wb = read(readFileSync(path));
|
||||
var data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
||||
return `export default JSON.parse('${JSON.stringify(data)}')`;
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
This loader uses the query `sheetjs`:
|
||||
|
||||
```js title="main.js"
|
||||
import data from './data.xlsx?sheetjs';
|
||||
|
||||
document.querySelector('#app').innerHTML = `<div><pre>
|
||||
${data.map(row => JSON.stringify(row)).join("\n")}
|
||||
</pre></div>`;
|
||||
```
|
||||
|
||||
<details><summary><b>Base64 plugin</b> (click to show)</summary>
|
||||
|
||||
This loader pulls in data as a Base64 string that can be read with `XLSX.read`.
|
||||
While this approach works, it is not recommended since it loads the library in
|
||||
the front-end site.
|
||||
|
||||
```js title="vite.config.js"
|
||||
import { readFileSync } from 'fs';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
assetsInclude: ['**/*.xlsx'], // mark that xlsx file should be treated as assets
|
||||
|
||||
plugins: [
|
||||
{ // this plugin handles ?b64 tags
|
||||
name: "vite-b64-plugin",
|
||||
transform(code, id) {
|
||||
if(!id.match(/\?b64$/)) return;
|
||||
var path = id.replace(/\?b64/, "");
|
||||
var data = readFileSync(path, "base64");
|
||||
return `export default '${data}'`;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
When importing using the `b64` query, the raw Base64 string will be exposed.
|
||||
This can be read directly with `XLSX.read` in JS code:
|
||||
|
||||
```js title="main.js"
|
||||
import { read, utils } from "xlsx";
|
||||
|
||||
/* reference workbook */
|
||||
import b64 from './data.xlsx?b64';
|
||||
/* parse workbook and export first sheet to CSV */
|
||||
const wb = await read(b64);
|
||||
const wsname = wb.SheetNames[0];
|
||||
const csv = utils.sheet_to_csv(wb.Sheets[wsname]);
|
||||
|
||||
document.querySelector('#app').innerHTML = `<div><pre>
|
||||
<b>${wsname}</b>
|
||||
${csv}
|
||||
</pre></div>`;
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## NextJS
|
||||
|
||||
:::note
|
||||
|
@ -1060,6 +1060,13 @@ Access http://localhost:8080 in your web browser.
|
||||
|
||||
</details>
|
||||
|
||||
:::note
|
||||
|
||||
The [Vite section of the Content demo](./content#vitejs) covers SheetJS-powered
|
||||
asset loaders, suitable for static sites pulling data from fixed spreadsheets.
|
||||
|
||||
:::
|
||||
|
||||
## Webpack
|
||||
|
||||
The ECMAScript Module build has no `require` or `import` statements and does
|
||||
|
Loading…
Reference in New Issue
Block a user