clipboard

This commit is contained in:
SheetJS 2022-07-06 01:38:24 -04:00
parent 611695c41e
commit 8f216aa501
5 changed files with 128 additions and 8 deletions

@ -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:

@ -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