clipboard files
This commit is contained in:
parent
3a6ab80ae8
commit
32f1324e30
@ -43,37 +43,81 @@ 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() {
|
||||
function ClipboardRead() {
|
||||
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);
|
||||
};
|
||||
const paste = React.useCallback((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 (
|
||||
<>
|
||||
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>}
|
||||
</>
|
||||
);
|
||||
{csvs.every(x => !x) && <b onPaste={paste}>Copy data in Excel, click here, and paste (Control+V)</b>}
|
||||
</> );
|
||||
}
|
||||
```
|
||||
|
||||
### Reading Files
|
||||
|
||||
Modern browsers support reading files that users have copied into the clipboard.
|
||||
|
||||
:::caution
|
||||
|
||||
Excel does not copy data into files! Use your system file browser to select and
|
||||
copy spreadsheets into the clipboard.
|
||||
|
||||
:::
|
||||
|
||||
The event `clipboardData.files` property, if it is set, is a list of files.
|
||||
|
||||
```jsx live
|
||||
function ClipboardReadFiles() {
|
||||
const [data, setData] = React.useState([]);
|
||||
|
||||
/* Set up paste handler */
|
||||
const paste = React.useCallback(async(e)=>{
|
||||
const result = [];
|
||||
|
||||
/* loop over files */
|
||||
const files = e.clipboardData.files || [];
|
||||
for(let i = 0; i < files.length; ++i) {
|
||||
const file = files.item(i);
|
||||
|
||||
/* filter MIME type for spreadsheets */
|
||||
if(!file.type.match(/excel|sheet|csv/)) continue;
|
||||
|
||||
/* read data */
|
||||
const wb = XLSX.read(await file.arrayBuffer());
|
||||
|
||||
/* capture sheet names */
|
||||
result.push([file.name, wb.SheetNames]);
|
||||
}
|
||||
setData(result);
|
||||
}, []);
|
||||
|
||||
return ( <>
|
||||
{data.map((f,idx) => (<pre key={idx}>
|
||||
<b>Sheet Names from {f[0]}</b><br/>{f[1].join("\n")}
|
||||
</pre>))}
|
||||
{!data.length && (<b onPaste={paste}>Copy files, click here, and paste (Control+V)</b>)}
|
||||
</> );
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Browser Writing (copy)
|
||||
|
||||
Clipboard data can be written from a `copy` event, accessible from the event
|
||||
@ -104,34 +148,32 @@ Browsers do not currently support assigning to the `text/rtf` clipboard type.
|
||||
|
||||
This demo creates a simple workbook from the following HTML table:
|
||||
|
||||
<table id="srcdata">
|
||||
<table id="srcdata"><tbody>
|
||||
<tr><td>SheetJS</td><td>Clipboard</td><td>Demo</td></tr>
|
||||
<tr><td>bookType</td><td>RTF</td></tr>
|
||||
<tr><td>source</td><td>HTML Table</td></tr>
|
||||
</table>
|
||||
</tbody></table>
|
||||
|
||||
Create a new file in Excel then come back to this window. Select the text
|
||||
below and copy (Control+C for Windows, Command+C for Mac). Go back to the
|
||||
excel
|
||||
|
||||
```jsx live
|
||||
function Clipboard() {
|
||||
function ClipboardWrite() {
|
||||
/* Set up copy handler */
|
||||
React.useEffect(async() => {
|
||||
document.oncopy = function(e) {
|
||||
/* generate workbook from table */
|
||||
var wb = XLSX.utils.table_to_book(document.getElementById("srcdata"));
|
||||
/* get HTML of first worksheet in workbook */
|
||||
var str = XLSX.write(wb, {type: "string", bookType: "html"});
|
||||
/* set HTML clipboard data */
|
||||
e.clipboardData.setData('text/html', str);
|
||||
/* prevent the browser from copying the normal data */
|
||||
e.preventDefault();
|
||||
};
|
||||
const copy = React.useCallback((e) => {
|
||||
/* generate workbook from table */
|
||||
var wb = XLSX.utils.table_to_book(document.getElementById("srcdata"));
|
||||
/* get HTML of first worksheet in workbook */
|
||||
var str = XLSX.write(wb, {type: "string", bookType: "html"});
|
||||
/* set HTML clipboard data */
|
||||
e.clipboardData.setData('text/html', str);
|
||||
/* prevent the browser from copying the normal data */
|
||||
e.preventDefault();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<b>Select this text, copy (Control+C), and paste in Excel</b>
|
||||
<b onCopy={copy}>Select this text, copy (Control+C), and paste in Excel</b>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user