forked from sheetjs/docs.sheetjs.com
clipboard
This commit is contained in:
parent
611695c41e
commit
8f216aa501
@ -19,6 +19,17 @@ import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs'
|
||||
|
||||
The `@deno-types` comment instructs Deno to use the type definitions.
|
||||
|
||||
:::warning
|
||||
|
||||
Older releases are technically available on [deno.land/x](https://deno.land/x/)
|
||||
but the Deno registry is out of date.
|
||||
|
||||
[This is a known registry bug](https://github.com/denoland/dotland/issues/2072)
|
||||
|
||||
<https://cdn.sheetjs.com/> is the authoritative source for SheetJS scripts.
|
||||
|
||||
:::
|
||||
|
||||
## XLS Support
|
||||
|
||||
If XLS support is required, `cpexcel.full.mjs` must be manually imported:
|
||||
|
||||
77
docz/docs/04-getting-started/03-demos/06-clipboard.md
Normal file
77
docz/docs/04-getting-started/03-demos/06-clipboard.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Clipboard Data
|
||||
|
||||
Spreadsheet software like Excel typically support copying and pasting cells and
|
||||
data. This is implemented through the Clipboard ("Pasteboard" in OSX parlance).
|
||||
|
||||
When copying a selection of cells, Excel for Windows stores a screenshot of the
|
||||
selected cells as an image. It also creates and stores a number of strings and
|
||||
files for the various formats, including TSV, CSV, HTML, RTF, SYLK, DIF, XLSB,
|
||||
XLS (both '97-2004 and '95), and SpreadsheetML 2003.
|
||||
|
||||
Not all Clipboard APIs offer access to all clipboard types.
|
||||
|
||||
## Browser
|
||||
|
||||
Clipboard data can be read from a `paste` event, accessible from the event
|
||||
`clipboardData` property:
|
||||
|
||||
```js
|
||||
document.onpaste = function(e) {
|
||||
/* get TSV */
|
||||
var str = e.clipboardData.getData('text/html');
|
||||
/* parse */
|
||||
var wb = XLSX.read(str, {type: "string"});
|
||||
/* DO SOMETHING WITH wb HERE */
|
||||
}
|
||||
```
|
||||
|
||||
`getData` accepts one argument: the desired MIME type. Chrome 103 supports:
|
||||
|
||||
| MIME type | Data format |
|
||||
|:-------------|:---------------------------|
|
||||
| `text/plain` | TSV (tab separated values) |
|
||||
| `text/html` | HTML |
|
||||
| `text/rtf` | RTF (rich text format) |
|
||||
|
||||
`getData` returns a string compatible with the `string` type for `XLSX.read`.
|
||||
|
||||
### Live Demo
|
||||
|
||||
Open a file in Excel, copy some cells, then come back to this window. Click on
|
||||
"RESULT" below and paste (Control+V for Windows, Command+V for Mac).
|
||||
|
||||
```jsx live
|
||||
function Clipboard() {
|
||||
const [csvs, setCSVs] = React.useState([ "", "", "" ]);
|
||||
|
||||
/* Set up paste handler */
|
||||
React.useEffect(async() => {
|
||||
document.onpaste = function(e) {
|
||||
/* this demo will read 3 different clipboard data types */
|
||||
var mime_arr = [ 'text/plain', 'text/html', 'text/rtf' ];
|
||||
/* get clipboard data for each type */
|
||||
var data_arr = mime_arr.map(mime => e.clipboardData.getData(mime));
|
||||
/* parse each data string into a workbook */
|
||||
var wb_arr = data_arr.map(str => XLSX.read(str, {type: "string"}));
|
||||
/* get first worksheet from each workbook */
|
||||
var ws_arr = wb_arr.map(wb => wb.Sheets[wb.SheetNames[0]]);
|
||||
/* generate CSV for each "first worksheet" */
|
||||
var result = ws_arr.map(ws => XLSX.utils.sheet_to_csv(ws));
|
||||
setCSVs(result);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{csvs[0] && (<pre><b>Data from clipboard TSV (text/plain)</b><br/>{csvs[0]}</pre>)}
|
||||
{csvs[1] && (<pre><b>Data from clipboard HTML (text/html)</b><br/>{csvs[1]}</pre>)}
|
||||
{csvs[2] && (<pre><b>Data from clipboard RTF (text/rtf)</b><br/>{csvs[2]}</pre>)}
|
||||
{csvs.every(x => !x) && <b>Copy data in Excel, click here, and paste (Control+V)</b>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
@ -7,7 +7,13 @@ hide_table_of_contents: true
|
||||
|
||||
The demo projects include small runnable examples and short explainers.
|
||||
|
||||
### Frameworks and APIs
|
||||
### JavaScript APIs
|
||||
|
||||
- [`XMLHttpRequest and fetch`](https://github.com/SheetJS/SheetJS/tree/master/demos/xhr/)
|
||||
- [`Clipboard Data`](./clipboard)
|
||||
- [`Typed Arrays and Math`](https://github.com/SheetJS/SheetJS/tree/master/demos/array/)
|
||||
|
||||
### Frameworks
|
||||
|
||||
- [`Angular.JS`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular/)
|
||||
- [`Angular 2+ and Ionic`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular2/)
|
||||
@ -15,10 +21,6 @@ The demo projects include small runnable examples and short explainers.
|
||||
- [`Meteor`](https://github.com/SheetJS/SheetJS/tree/master/demos/meteor/)
|
||||
- [`React, React Native and NextJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/react/)
|
||||
- [`VueJS, WeeX, and NuxtJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/)
|
||||
- [`XMLHttpRequest and fetch`](https://github.com/SheetJS/SheetJS/tree/master/demos/xhr/)
|
||||
- [`NodeJS Server-Side Processing`](https://github.com/SheetJS/SheetJS/tree/master/demos/server/)
|
||||
- [`Databases and Key/Value Stores`](https://github.com/SheetJS/SheetJS/tree/master/demos/database/)
|
||||
- [`Typed Arrays and Math`](https://github.com/SheetJS/SheetJS/tree/master/demos/array/)
|
||||
|
||||
### Front-End UI Components
|
||||
|
||||
@ -28,6 +30,8 @@ The demo projects include small runnable examples and short explainers.
|
||||
- [`vue3-table-light`](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/modify/)
|
||||
|
||||
### Platforms and Integrations
|
||||
|
||||
- [`NodeJS Server-Side Processing`](https://github.com/SheetJS/SheetJS/tree/master/demos/server/)
|
||||
- [`Deno`](https://github.com/SheetJS/SheetJS/tree/master/demos/deno/)
|
||||
- [`Electron`](https://github.com/SheetJS/SheetJS/tree/master/demos/electron/)
|
||||
- [`NW.js`](https://github.com/SheetJS/SheetJS/tree/master/demos/nwjs/)
|
||||
@ -40,11 +44,12 @@ The demo projects include small runnable examples and short explainers.
|
||||
- [`Headless Browsers`](https://github.com/SheetJS/SheetJS/tree/master/demos/headless/)
|
||||
- [`Other JavaScript Engines`](https://github.com/SheetJS/SheetJS/tree/master/demos/altjs/)
|
||||
- [`"serverless" functions`](https://github.com/SheetJS/SheetJS/tree/master/demos/function/)
|
||||
- [`Databases and Key/Value Stores`](https://github.com/SheetJS/SheetJS/tree/master/demos/database/)
|
||||
- [`Legacy Internet Explorer`](https://github.com/SheetJS/SheetJS/tree/master/demos/oldie/)
|
||||
|
||||
### Bundlers and Tooling
|
||||
|
||||
- [`browserify`](https://github.com/SheetJS/SheetJS/tree/master/demos/browserify/)
|
||||
- [`fusebox`](https://github.com/SheetJS/SheetJS/tree/master/demos/fusebox/)
|
||||
- [`parcel`](https://github.com/SheetJS/SheetJS/tree/master/demos/parcel/)
|
||||
- [`requirejs`](https://github.com/SheetJS/SheetJS/tree/master/demos/requirejs/)
|
||||
- [`rollup`](https://github.com/SheetJS/SheetJS/tree/master/demos/rollup/)
|
||||
|
||||
@ -640,6 +640,32 @@ function process_RS(stream, cb) {
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="deno" label="Deno">
|
||||
|
||||
In addition to the browser `ReadableStream` API, Deno has its own `Reader`
|
||||
[interface](https://doc.deno.land/deno/stable/~/Deno.Reader).
|
||||
|
||||
For these streams, `std` provides a `readAll` method to collect data into a
|
||||
`Uint8Array`. This example reads from a file using `Deno.open` and prints the
|
||||
worksheet names array:
|
||||
|
||||
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
|
||||
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
|
||||
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
|
||||
|
||||
import { readAll } from "https://deno.land/std/streams/conversion.ts";
|
||||
|
||||
/* Simple Deno.Reader from a file */
|
||||
const file = await Deno.open("test.xlsx", {read: true});
|
||||
|
||||
/* \`content\` will be a Uint8Array holding the full contents of the stream */
|
||||
const content = await readAll(file);
|
||||
|
||||
/* Since this is a Uint8Array, \`XLSX.read\` "just works" */
|
||||
const wb = XLSX.read(content);
|
||||
console.log(wb.SheetNames);`}</code></pre>
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@ range limits will be silently truncated:
|
||||
|:------------------------------------------|:-----------|---------:|---------:|
|
||||
| Excel 2007+ XML Formats (XLSX/XLSM) | XFD1048576 | 16384 | 1048576 |
|
||||
| Excel 2007+ Binary Format (XLSB BIFF12) | XFD1048576 | 16384 | 1048576 |
|
||||
| Numbers 12.0 (NUMBERS) | ALL1000000 | 1000 | 1000000 |
|
||||
| Numbers 12.1 (NUMBERS) | ALL1000000 | 1000 | 1000000 |
|
||||
| Quattro Pro 9+ (QPW) | IV1000000 | 256 | 1000000 |
|
||||
| Excel 97-2004 (XLS BIFF8) | IV65536 | 256 | 65536 |
|
||||
| Excel 5.0/95 (XLS BIFF5) | IV16384 | 256 | 16384 |
|
||||
@ -172,7 +172,8 @@ XLR also includes a `WksSSWorkBook` stream similar to Lotus FM3/FMT files.
|
||||
|
||||
iWork 2013 (Numbers 3.0 / Pages 5.0 / Keynote 6.0) switched from a proprietary
|
||||
XML-based format to the current file format based on the iWork Archive (IWA).
|
||||
This format has been used up through the current release (Numbers 11.2).
|
||||
This format has been used up through the current release (Numbers 12.1) as well
|
||||
as the iCloud.com web interface to Numbers.
|
||||
|
||||
The parser focuses on extracting raw data from tables. Numbers technically
|
||||
supports multiple tables in a logical worksheet, including custom titles. This
|
||||
|
||||
Loading…
Reference in New Issue
Block a user