Sheetjs: Read the excel file simple issue

[kantmani4]

@SheetJSDev

I am new to react , I have a small problem.

I have a below method and "TestExcel.xlsx" is in my root folder where my package.json file is also there. Same location.

Method:
uploadFileAction() {
const workbook = XLSX.readFile('TestExcel.xlsx', 'file');
console.log(workbook)
}

I am getting the below error.
default: throw new Error("Unrecognized type " + opts.type);.

In the document it says node.js only for file type:

type expected input
"base64" string: Base64 encoding of the file
"binary" string: binary string (byte n is data.charCodeAt(n))
"string" string: JS string (characters interpreted as UTF8)
"buffer" nodejs Buffer
"array" array: array of 8-bit unsigned int (byte n is data[n])
"file" string: path of file that will be read (nodejs only)

Can someone provide me the code how to do that via node.js or can some one help me how to convert my "TestExcel.xlsx" from my root folder to base64string. .

I have searched but there is no proper info provided. can some one help me with that.

In react when I browse and upload the excel , how to convert the excel into object using
import XLSX from 'xlsx'; component.

Thanks

[SheetJSDev]

You have to make the file publicly available, then do a fetch and read with type array.

Example: https://codesandbox.io/s/snowy-dawn-sicpb (note the import is not merely import XLSX from "xlsx" because of some issues with CodeSandbox).

The testfile.xlsx file is placed in the /public directory of the project.

The relevant part of the code is in the componentDidMount method:

    fetch("testfile.xlsx").then(res => res.arrayBuffer()).then(ab => {
        const wb = XLSX.read(ab, { type: "array" });
        // do more stuff here ...

Sandbox index.js (click to show)

import XLSX from "xlsx/dist/xlsx.full.min";
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { html: "<b>SheetJS</b>" };
  }
  componentDidMount() {
    fetch("testfile.xlsx")
      .then(res => res.arrayBuffer())
      .then(ab => {
        const wb = XLSX.read(ab, { type: "array" });
        const ws = wb.Sheets["Sheet JS"];
        const html = XLSX.utils.sheet_to_html(ws);
        this.setState({ html });
      });
  }
  render() {
    console.log(this.state.html);
    return (
      <div
        className="App"
        dangerouslySetInnerHTML={{ __html: this.state.html }}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[kantmani4]

@SheetJSDev

As per my requirement I will not call the any api. User will browse the file from file system and then I have to convert into object for the xsl validation.

button onClick={this.uploadFileAction}

uploadFileAction() {
fetch("D:\Official\EcoPetrol\Project\Develop\Ecp.True\Ecp.True.Host.UI.Web\EstructuraCargaOperacionesTercerosV1.xlsx")
.then(res => res.arrayBuffer())
.then(ab => {
const wb = XLSX.read(ab, { type: "array" });
console.log(wb);
});

    ////var buf = FS.readFileSync("D:\\Official\\EcoPetrol\\Project\\Develop\\Ecp.True\\Ecp.True.Host.UI.Web\\EstructuraCargaOperacionesTercerosV1.xlsx");
   //// const workbook = XLSX.readFile(buf.toString("base64"),'base64');
   //// const workbook = XLSX.readFile('EstructuraCargaOperacionesTercerosV1.xlsx','utf8');
    ////const workbook = XLSX.readFile('D:\\Official\\EcoPetrol\\Project\\Develop\\Ecp.True\\Ecp.True.Host.UI.Web\\EstructuraCargaOperacionesTercerosV1.xlsx');
    ////console.log(workbook);
  }

Can you please help me how to get the file as input and then parse the file.

[SheetJSDev]

You can't read from a file that way (it breaks the browser sandbox) but you can show a form, see https://github.com/SheetJS/js-xlsx/blob/master/demos/react/sheetjs.jsx for an example with uploading data

[kantmani4]

As per my requirement I will not call the any api. User will browse the
file from file system and then I have to convert into object for the xsl
validation.

button onClick={this.uploadFileAction}

uploadFileAction() {
fetch("D:\Official\EcoPetrol\Project\Develop\Ecp.True\Ecp.True.Host.UI.Web\EstructuraCargaOperacionesTercerosV1.xlsx")
.then(res => res.arrayBuffer())
.then(ab => {
const wb = XLSX.read(ab, { type: "array" });
console.log(wb);
});

////var buf =

FS.readFileSync("D:\Official\EcoPetrol\Project\Develop\Ecp.True\Ecp.True.Host.UI.Web\EstructuraCargaOperacionesTercerosV1.xlsx");
//// const workbook = XLSX.readFile(buf.toString("base64"),'base64');
//// const workbook =
XLSX.readFile('EstructuraCargaOperacionesTercerosV1.xlsx','utf8');
////const workbook =
XLSX.readFile('D:\Official\EcoPetrol\Project\Develop\Ecp.True\Ecp.True.Host.UI.Web\EstructuraCargaOperacionesTercerosV1.xlsx');
////console.log(workbook);
}

Can you help me without calling any api , when user upload his xsl file
from local system I need to parse that xsl file. Can you please help me
with that.

On Thu, Sep 19, 2019 at 2:33 AM SheetJSDev [e-mail] wrote:

Closed #1630 https://github.com/SheetJS/js-xlsx/issues/1630.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/SheetJS/js-xlsx/issues/1630?email_source=notifications&email_token=AFSFQCJYBHROP3YNUBB4Y3DQKKJSXA5CNFSM4IYDHYNKYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOTWTIL3I#event-2644936173,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFSFQCNECGJNSWULP553U4LQKKJSXANCNFSM4IYDHYNA
.

[kantmani4]

There is one below method :

Can you help , how to upload the excel file and get the data in the input
textbox so that I can send that data to your below method.

I have written the below HTML:

Please select an action and a valid excel document to upload

Action

Cancel Save

Its basically show an UI to upload a file ( id="excelFile"/> )and how can I get the file data binded so that I can send
that data to your below method. Can you please help me with that.

/** Attempts to parse data */
export function read(data: any, opts?: ParsingOptions): WorkBook;

On Thu, Sep 19, 2019 at 2:54 AM SheetJSDev [e-mail] wrote:

You can't read from a file that way (it breaks the browser sandbox) but
you can show a form, see
https://github.com/SheetJS/js-xlsx/blob/master/demos/react/sheetjs.jsx
for an example with uploading data

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/SheetJS/js-xlsx/issues/1630?email_source=notifications&email_token=AFSFQCPUFOS5YFPXGBDHDBTQKKL7FA5CNFSM4IYDHYNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7BP2XY#issuecomment-532872543,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFSFQCMWRBSRVVE7W7QDKULQKKL7FANCNFSM4IYDHYNA
.