diff --git a/docz/docs/03-demos/32-clipboard.md b/docz/docs/03-demos/32-clipboard.md index 951f294..28084da 100644 --- a/docz/docs/03-demos/32-clipboard.md +++ b/docz/docs/03-demos/32-clipboard.md @@ -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] && (
Data from clipboard TSV (text/plain))} {csvs[1] && (
{csvs[0]}
Data from clipboard HTML (text/html))} {csvs[2] && (
{csvs[1]}
Data from clipboard RTF (text/rtf))} - {csvs.every(x => !x) && Copy data in Excel, click here, and paste (Control+V)} - > - ); + {csvs.every(x => !x) && Copy data in Excel, click here, and paste (Control+V)} + > ); } ``` +### 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) => (
{csvs[2]}
+ Sheet Names from {f[0]}))} + {!data.length && (Copy files, click here, and paste (Control+V))} + > ); +} +``` + + ## 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: -
{f[1].join("\n")} +
SheetJS | Clipboard | Demo |
bookType | RTF | |
source | HTML Table |