forked from sheetjs/docs.sheetjs.com
		
	xmldom
This commit is contained in:
		
							parent
							
								
									a36dee9eeb
								
							
						
					
					
						commit
						b6095aff3f
					
				
							
								
								
									
										1
									
								
								.gitignore
									
									
									
									
										vendored
									
									
								
							
							
								
								
								
								
								
									
									
								
							
						
						
									
										1
									
								
								.gitignore
									
									
									
									
										vendored
									
									
								
							@ -2,3 +2,4 @@
 | 
			
		||||
*.bak
 | 
			
		||||
package-lock.json
 | 
			
		||||
pnpm-lock.yaml
 | 
			
		||||
docs
 | 
			
		||||
 | 
			
		||||
@ -37,7 +37,7 @@ const workbook = XLSX.utils.table_to_book(tbl);
 | 
			
		||||
XLSX.writeFile(workbook, "SheetJSDOM.xlsx");
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
<details open><summary><b>Complete Demo</b> (click to hide)</summary>
 | 
			
		||||
<details><summary><b>Complete Demo</b> (click to show)</summary>
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
 | 
			
		||||
@ -81,6 +81,61 @@ node SheetJSDOM.js
 | 
			
		||||
 | 
			
		||||
The script will create a file `SheetJSDOM.xlsx` that can be opened.
 | 
			
		||||
 | 
			
		||||
</details>
 | 
			
		||||
 | 
			
		||||
### XMLDOM
 | 
			
		||||
 | 
			
		||||
XMLDOM provides a DOM framework for NodeJS. Given an HTML string, a reference to
 | 
			
		||||
the table element works with the SheetJS DOM methods after patching the object.
 | 
			
		||||
 | 
			
		||||
<details><summary><b>Complete Demo</b> (click to show)</summary>
 | 
			
		||||
 | 
			
		||||
:::note
 | 
			
		||||
 | 
			
		||||
This demo was last tested on 2023 May 18 against XMLDOM `0.8.7`
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
1) Install SheetJS and XMLDOM libraries:
 | 
			
		||||
 | 
			
		||||
<CodeBlock language="bash">{`\
 | 
			
		||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @xmldom/xmldom@0.8.7`}
 | 
			
		||||
</CodeBlock>
 | 
			
		||||
 | 
			
		||||
2) Save the following codeblock to `SheetJSXMLDOM.js`:
 | 
			
		||||
 | 
			
		||||
```js title="SheetJSXMLDOM.js"
 | 
			
		||||
const XLSX = require("xlsx");
 | 
			
		||||
const { DOMParser, XMLSerializer } = require("@xmldom/xmldom");
 | 
			
		||||
 | 
			
		||||
(async() => {
 | 
			
		||||
const text = await (await fetch('https://docs.sheetjs.com/dom/SheetJSTable.html')).text();
 | 
			
		||||
const doc = new DOMParser().parseFromString( text, "text/html");
 | 
			
		||||
const tbl = doc.getElementsByTagName("table")[0];
 | 
			
		||||
 | 
			
		||||
/* patch XMLDOM */
 | 
			
		||||
tbl.rows = Array.from(tbl.getElementsByTagName("tr"));
 | 
			
		||||
tbl.rows.forEach(row => row.cells = Array.from(row.getElementsByTagName("td")))
 | 
			
		||||
Object.defineProperty(tbl.__proto__, "innerHTML", { get: function() {
 | 
			
		||||
	var outerHTML = new XMLSerializer().serializeToString(this);
 | 
			
		||||
	if(outerHTML.match(/</g).length == 1) return "";
 | 
			
		||||
	return outerHTML.slice(0, outerHTML.lastIndexOf("</")).replace(/<[^"'>]*(("[^"]*"|'[^']*')[^"'>]*)*>/, "");
 | 
			
		||||
}});
 | 
			
		||||
 | 
			
		||||
const workbook = XLSX.utils.table_to_book(tbl);
 | 
			
		||||
XLSX.writeFile(workbook, "SheetJSXMLDOM.xlsx");
 | 
			
		||||
})();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
3) Run the script:
 | 
			
		||||
 | 
			
		||||
```bash
 | 
			
		||||
node SheetJSXMLDOM.js
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
The script will create a file `SheetJSXMLDOM.xlsx` that can be opened.
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
</details>
 | 
			
		||||
 | 
			
		||||
### CheerioJS
 | 
			
		||||
 | 
			
		||||
@ -144,28 +144,32 @@ The following code block fetches the file, parses and prints info on cell `D1`:
 | 
			
		||||
```jsx live
 | 
			
		||||
/* The live editor requires this function wrapper */
 | 
			
		||||
function ConcatFormula(props) {
 | 
			
		||||
  const [text, setText] = React.useState([]);
 | 
			
		||||
  const [ws, setWS] = React.useState({"!ref":"A1"});
 | 
			
		||||
  const [addr, setAddr] = React.useState("D1");
 | 
			
		||||
  const setaddr = React.useCallback((evt)=>{ setAddr(evt.target.value) });
 | 
			
		||||
 | 
			
		||||
  /* Fetch and display formula */
 | 
			
		||||
  /* Process ArrayBuffer */
 | 
			
		||||
  const process_ab = (ab) => {
 | 
			
		||||
    const wb = XLSX.read(ab, {cellFormula: true, sheetStubs: true});
 | 
			
		||||
    setWS(wb.Sheets[wb.SheetNames[0]]);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  /* Fetch sample file */
 | 
			
		||||
  React.useEffect(async() => {
 | 
			
		||||
    /* Fetch file */
 | 
			
		||||
    const ab = await (await fetch("/files/concat.xlsx")).arrayBuffer();
 | 
			
		||||
 | 
			
		||||
    /* Parse file */
 | 
			
		||||
    const wb = XLSX.read(ab, {cellFormula: true});
 | 
			
		||||
    const ws = wb.Sheets[wb.SheetNames[0]];
 | 
			
		||||
 | 
			
		||||
    /* Look at cell D1 */
 | 
			
		||||
    const addr = "D1";
 | 
			
		||||
    const { t, v, f } = ws[addr];
 | 
			
		||||
    setText(`\
 | 
			
		||||
CELL ADDRESS: ${addr}\n\
 | 
			
		||||
CELL FORMULA: ${f}\n\
 | 
			
		||||
VALUE (TYPE): "${v}" ("${t}")\n\
 | 
			
		||||
`);
 | 
			
		||||
    process_ab(await (await fetch("/files/concat.xlsx")).arrayBuffer());
 | 
			
		||||
  }, []);
 | 
			
		||||
 | 
			
		||||
  return (<pre>{text}</pre>);
 | 
			
		||||
  const process_file = async(e) => {
 | 
			
		||||
    process_ab(await e.target.files[0].arrayBuffer());
 | 
			
		||||
  };
 | 
			
		||||
  return ( <>
 | 
			
		||||
    <input type="file" onChange={process_file}/><br/>
 | 
			
		||||
    <b>addr: </b><input type="text" value={addr} onChange={setaddr} size="6"/>
 | 
			
		||||
    {!ws[addr] ? ( <b>Cell {addr} not found</b> ) : ( <table>
 | 
			
		||||
      <tr><td>Formula</td><td><code>{ws[addr].f}</code></td></tr>
 | 
			
		||||
      <tr><td>Value</td><td><code>{ws[addr].v}</code></td></tr>
 | 
			
		||||
      <tr><td>Cell Type</td><td><code>{ws[addr].t}</code></td></tr>
 | 
			
		||||
    </table> )}
 | 
			
		||||
  </> );
 | 
			
		||||
}
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -21,9 +21,10 @@ allow users to "reply". The original "Comments" were renamed to "Notes".
 | 
			
		||||
| XLML              |   ✔   |    ✔    |    *     |
 | 
			
		||||
| SYLK              |       |    *    |    *     |
 | 
			
		||||
| ODS / FODS / UOS  |   ✔   |    R    |    *     |
 | 
			
		||||
| NUMBERS           |   *   |    *    |          |
 | 
			
		||||
 | 
			
		||||
Asterisks (*) mark features that are not supported by the file formats. There is
 | 
			
		||||
no way to specify a threaded comment in the SYLK format.
 | 
			
		||||
Asterisks (*) mark features that are not supported by the file formats. Numbers
 | 
			
		||||
supports plaintext threaded comments but does not support Excel styled comments.
 | 
			
		||||
 | 
			
		||||
The letter R (R) marks features parsed but not written in the format.
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user