| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | --- | 
					
						
							|  |  |  | sidebar_position: 1 | 
					
						
							|  |  |  | hide_table_of_contents: true | 
					
						
							| 
									
										
										
										
											2022-08-13 22:01:26 +00:00
										 |  |  | title: Overview | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # SheetJS CE
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |  | 
					
						
							|  |  |  | [](https://github.com/SheetJS/sheetjs/actions) | 
					
						
							| 
									
										
										
										
											2022-08-23 03:20:02 +00:00
										 |  |  | [](https://snyk.io/test/github/SheetJS/sheetjs) | 
					
						
							| 
									
										
										
										
											2022-05-30 05:04:05 +00:00
										 |  |  | [](https://cdn.sheetjs.com/) | 
					
						
							| 
									
										
										
										
											2022-08-23 03:20:02 +00:00
										 |  |  | [](https://github.com/SheetJS/sheetjs) | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | SheetJS Community Edition offers battle-tested open-source solutions for | 
					
						
							|  |  |  | extracting useful data from almost any complex spreadsheet and generating new | 
					
						
							|  |  |  | spreadsheets that will work with legacy and modern software alike. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | [SheetJS Pro](https://sheetjs.com/pro) offers solutions beyond data processing: | 
					
						
							|  |  |  | Edit complex templates with ease; let out your inner Picasso with styling; make | 
					
						
							|  |  |  | custom sheets with images/graphs/PivotTables; evaluate formula expressions and | 
					
						
							|  |  |  | port calculations to web apps; automate common spreadsheet tasks, and much more! | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Simple Examples
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | The code editors are live -- feel free to edit! They use ReactJS components and | 
					
						
							|  |  |  | run entirely in the web browser. | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ### Export an HTML Table to Excel XLSX
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details><summary><b>How to add to your site</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 1) Make sure your table has an ID: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <table id="TableToExport"> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 2) Include a reference to the SheetJS Library in your page: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 3) Add a button that users will click to generate an export | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <button id="sheetjsexport"><b>Export as XLSX</b></button> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 4) Add an event handler for the `click` event to create a workbook and download: | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | ```html | 
					
						
							|  |  |  | <script> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:30:34 +00:00
										 |  |  | document.getElementById("sheetjsexport").addEventListener('click', function() { | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  |   /* Create worksheet from HTML DOM TABLE */ | 
					
						
							|  |  |  |   var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport")); | 
					
						
							|  |  |  |   /* Export to file (start a download) */ | 
					
						
							|  |  |  |   XLSX.writeFile(wb, "SheetJSTable.xlsx"); | 
					
						
							|  |  |  | }); | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | </script> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | <details><summary><b>How to automate with NodeJS</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-10-30 05:45:37 +00:00
										 |  |  | [The "Headless Automation" demo](/docs/demos/headless) includes complete examples | 
					
						
							| 
									
										
										
										
											2022-08-24 06:02:38 +00:00
										 |  |  | using the `puppeteer` and `playwright` browser automation frameworks. | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-06-21 12:26:53 +00:00
										 |  |  | <details open><summary><b>Live Example</b> (click to hide)</summary> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```jsx live | 
					
						
							|  |  |  | /* The live editor requires this function wrapper */ | 
					
						
							|  |  |  | function Table2XLSX(props) { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   /* Callback invoked when the button is clicked */ | 
					
						
							| 
									
										
										
										
											2022-05-30 05:04:05 +00:00
										 |  |  |   const xport = React.useCallback(async () => { | 
					
						
							| 
									
										
										
										
											2022-08-26 19:21:53 +00:00
										 |  |  |     /* Create worksheet from HTML DOM TABLE */ | 
					
						
							|  |  |  |     const table = document.getElementById("Table2XLSX"); | 
					
						
							|  |  |  |     const wb = XLSX.utils.table_to_book(table); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-26 19:21:53 +00:00
										 |  |  |     /* Export to file (start a download) */ | 
					
						
							|  |  |  |     XLSX.writeFile(wb, "SheetJSTable.xlsx"); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   return (<> | 
					
						
							|  |  |  |     <table id="Table2XLSX"><tbody> | 
					
						
							|  |  |  |       <tr><td colSpan="3">SheetJS Table Export</td></tr> | 
					
						
							| 
									
										
										
										
											2022-08-04 03:00:20 +00:00
										 |  |  |       <tr><td>Author</td><td>ID</td><td>你好!</td></tr> | 
					
						
							|  |  |  |       <tr><td>SheetJS</td><td>7262</td><td>வணக்கம்!</td></tr> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  |       <tr><td colSpan="3"> | 
					
						
							|  |  |  |         <a href="//sheetjs.com">Powered by SheetJS</a> | 
					
						
							|  |  |  |       </td></tr> | 
					
						
							|  |  |  |     </tbody></table> | 
					
						
							|  |  |  |     <button onClick={xport}><b>Export XLSX!</b></button> | 
					
						
							|  |  |  |   </>); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <a href="https://sheetjs.com/pro">SheetJS Pro Basic</a> extends this export with | 
					
						
							|  |  |  | support for CSS styling and rich text. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Download and Preview a Numbers workbook
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details><summary><b>How to add to your site</b> (click to show)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 1) Create a container DIV for the table: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <div id="TableContainer"></div> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 2) Include a reference to the SheetJS Library in your page: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 3) Add a script block to download and update the page: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <script> | 
					
						
							|  |  |  | (async() => { | 
					
						
							| 
									
										
										
										
											2022-11-08 23:16:40 +00:00
										 |  |  |   /* replace with the URL of the file */ | 
					
						
							|  |  |  |   const URL_TO_DOWNLOAD = "https://sheetjs.com/pres.numbers"; | 
					
						
							|  |  |  |   const ab = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer(); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |   /* Parse file and get first worksheet */ | 
					
						
							|  |  |  |   const wb = XLSX.read(ab); | 
					
						
							| 
									
										
										
										
											2022-11-08 23:16:40 +00:00
										 |  |  |   const wsname = wb.SheetNames[0]; | 
					
						
							|  |  |  |   const ws = wb.Sheets[wsname]; | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |   /* Generate HTML */ | 
					
						
							|  |  |  |   var output = document.getElementById("TableContainer"); | 
					
						
							|  |  |  |   output.innerHTML = XLSX.utils.sheet_to_html(ws); | 
					
						
							|  |  |  | })(); | 
					
						
							|  |  |  | </script> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-06-21 12:26:53 +00:00
										 |  |  | <details><summary><b>Live Example</b> (click to show)</summary> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```jsx live | 
					
						
							|  |  |  | /* The live editor requires this function wrapper */ | 
					
						
							|  |  |  | function Numbers2HTML(props) { | 
					
						
							| 
									
										
										
										
											2022-10-21 00:10:10 +00:00
										 |  |  |   const [__html, setHTML] = React.useState(""); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |   /* Fetch and update HTML */ | 
					
						
							|  |  |  |   React.useEffect(async() => { | 
					
						
							|  |  |  |     /* Fetch file */ | 
					
						
							|  |  |  |     const f = await fetch("https://sheetjs.com/pres.numbers"); | 
					
						
							|  |  |  |     const ab = await f.arrayBuffer(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     /* Parse file */ | 
					
						
							|  |  |  |     const wb = XLSX.read(ab); | 
					
						
							|  |  |  |     const ws = wb.Sheets[wb.SheetNames[0]]; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     /* Generate HTML */ | 
					
						
							|  |  |  |     setHTML(XLSX.utils.sheet_to_html(ws)); | 
					
						
							| 
									
										
										
										
											2022-05-23 03:37:51 +00:00
										 |  |  |   }, []); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-10-21 00:10:10 +00:00
										 |  |  |   return (<div dangerouslySetInnerHTML={{ __html }}/>); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <a href="https://sheetjs.com/pro">SheetJS Pro Basic</a> extends this import with | 
					
						
							|  |  |  | support for CSS styling and rich text. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | ### Preview a workbook on your device
 | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  | <details open><summary><b>Live Example</b> (click to hide)</summary> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | This example starts from a CSV string.  Use the File Input element to select | 
					
						
							|  |  |  | a workbook to load.  Use the "Export XLSX" button to write the table to XLSX. | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```jsx live | 
					
						
							|  |  |  | /* The live editor requires this function wrapper */ | 
					
						
							|  |  |  | function Tabeller(props) { | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |   const [__html, setHTML] = React.useState(""); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |   /* Load sample data once */ | 
					
						
							|  |  |  |   React.useEffect(() => { | 
					
						
							|  |  |  |     /* Starting CSV data -- change data here */ | 
					
						
							|  |  |  |     const csv = `\ | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | This,is,a,Test | 
					
						
							|  |  |  | வணக்கம்,สวัสดี,你好,가지마 | 
					
						
							|  |  |  | 1,2,3,4`; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |     /* Parse CSV into a workbook object */ | 
					
						
							|  |  |  |     const wb = XLSX.read(csv, {type: "string"}); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |     /* Get the worksheet (default name "Sheet1") */ | 
					
						
							|  |  |  |     const ws = wb.Sheets.Sheet1; | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |     /* Create HTML table */ | 
					
						
							|  |  |  |     setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" })); | 
					
						
							|  |  |  |   }, []); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |   return (<> | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |     {/* Import Button */} | 
					
						
							|  |  |  |     <input type="file" onChange={async(e) => { | 
					
						
							|  |  |  |       /* get data as an ArrayBuffer */ | 
					
						
							|  |  |  |       const file = e.target.files[0]; | 
					
						
							|  |  |  |       const data = await file.arrayBuffer(); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       /* parse and load first worksheet */ | 
					
						
							|  |  |  |       const wb = XLSX.read(data); | 
					
						
							|  |  |  |       const ws = wb.Sheets[wb.SheetNames[0]]; | 
					
						
							|  |  |  |       setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" })); | 
					
						
							|  |  |  |     }}/> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |     {/* Export Button */} | 
					
						
							|  |  |  |     <button onClick={() => { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       /* Create worksheet from HTML DOM TABLE */ | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |       const table = document.getElementById("tabeller"); | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  |       const wb = XLSX.utils.table_to_book(table); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       /* Export to file (start a download) */ | 
					
						
							|  |  |  |       XLSX.writeFile(wb, "SheetJSIntro.xlsx"); | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |     }}><b>Export XLSX!</b></button> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-08-24 00:51:18 +00:00
										 |  |  |     {/* Show HTML preview */} | 
					
						
							| 
									
										
										
										
											2022-10-21 00:10:10 +00:00
										 |  |  |     <div dangerouslySetInnerHTML={{ __html }}/> | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  |   </>); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </details> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Browser Testing
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | [](https://saucelabs.com/u/sheetjs) | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Supported File Formats
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-10-30 05:45:37 +00:00
										 |  |  |  | 
					
						
							| 
									
										
										
										
											2022-05-16 03:26:04 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-10-30 05:45:37 +00:00
										 |  |  |  |