blocks|key|43375|text|您可以使用像https://react-dropzone.js.org/这样的库来上传文件，然后使用https://github.com/felixrieseberg/React-Spreadsheet-Component库来显示它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|43376|entityMap|0|LINK|mutability|MUTABLE|url|https://react-dropzone.js.org/|1|https://github.com/felixrieseberg/React-Spreadsheet-Component^0|6|U|0|1E|1P|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>You can use the library like <a href="https://react-dropzone.js.org/" rel="nofollow noreferrer">https://react-dropzone.js.org/</a> to upload files and then use <a href="https://github.com/felixrieseberg/React-Spreadsheet-Component" rel="nofollow noreferrer">https://github.com/felixrieseberg/React-Spreadsheet-Component</a> library to display it.</p>


blocks|key|2122217|text|react+excel-渲染器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2122218|这里有一个完美的图书馆！它首先将excel数据转换为JSON，然后将其呈现为HTML表。它叫react+excel-渲染器|offset|length|2122219|安装它npm+install+react-excel-renderer+--save|unordered-list-item|style|CODE|2122220|导入两个组件ExcelRenderer和OutTable
import+{ExcelRenderer,+OutTable}+from+'react-excel-renderer';|BOLD|2122221|将文件对象提供给事件处理程序中的ExcelRenderer函数
fileHandler+=(事件)+=>+{+let+fileObj+=+event.target.files；//只是将fileObj传递为参数ExcelRenderer(fileObj，(err，resp)+=>+{+if(err){+console.log(err)；}event.target.files{+this.setState({+cols:+resp.cols，row:+resp.rows+})；})；|2122222|获得JSON后，将其提供给OutTable组件
<OutTable+data={this.state.rows}+columns={this.state.cols}+tableClassName="ExcelTable2007"+tableHeaderRowClass="heading"+/>|2122223|就这样！完事了！|2122224|同样的演示程序可以找到这里。|2122225|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ashishd751/react-excel-renderer|1|https://ashishd751.github.io/excel-renderer-demo/^0|0|1A|F|0|0|3|13|0|6|D|K|8|T|1P|0|0|O|3F|0|0|B|2|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|H|7|1A|8|@$D|1B|E|1C|I|J]]|9|@]|A|$]]|$1|K|3|L|5|H|7|1D|8|@$D|1E|E|1F|I|M]|$D|1G|E|1H|I|M]|$D|1I|E|1J|I|J]]|9|@]|A|$]]|$1|N|3|O|5|H|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|H|7|1L|8|@$D|1M|E|1N|I|J]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1O|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1P|8|@]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|V|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<h2>react-excel-renderer</h2>

<p>There's a perfect library exactly for this ! It converts the excel data to JSON first, then renders it into a HTML table.
Its called <strong><a href="https://github.com/ashishd751/react-excel-renderer" rel="noreferrer">react-excel-renderer</a></strong></p>

<ul>
<li><p>Install it 
<code>npm install react-excel-renderer --save</code></p></li>
<li><p>Import both components <strong>ExcelRenderer</strong> and <strong>OutTable</strong> </p>

<p><code>import {ExcelRenderer, OutTable} from 'react-excel-renderer';</code></p></li>
<li><p>Provide the file object to the ExcelRenderer function in your event handler</p>

<pre><code>  fileHandler = (event) =&gt; {
let fileObj = event.target.files[0];

//just pass the fileObj as parameter
ExcelRenderer(fileObj, (err, resp) =&gt; {
  if(err){
    console.log(err);            
  }
  else{
    this.setState({
      cols: resp.cols,
      rows: resp.rows
    });
  }
});               

}
</code></pre></li>
<li><p>Once JSON is obtained, provide it to the OutTable component<br>
<code>&lt;OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" /&gt;</code></p></li>
</ul>

<p>Thats it ! Its done !</p>

<p>A demo for the same can be found <a href="https://ashishd751.github.io/excel-renderer-demo/" rel="noreferrer">here</a></p>


blocks|key|43412|text|我已经成功地使用xlsx读取excel文件表。就像这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|43413|import+excel+from+'xlsx';
let+fileName+=+"newData.xlsx";
let+workbook+=+excel.readFile(fileName);
console.log(workbook)+//should+print+an+array+with+the+excel+file+data|code-block|syntax|javascript|43414|假设根文件夹中有一个名为“newData.xlsx”的电子表格。然后，这只是一个问题，以解决如何访问您想要的数据。这也应该是有用的。|43415|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/xlsx|1|https://www.npmjs.com/package/xlsx#cell-object^0|8|4|0|0|0|1L|1|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>I've had success with this using <a href="https://www.npmjs.com/package/xlsx" rel="nofollow noreferrer">xlsx</a> to read excel file sheets.
Just do something like this:</p>

<pre><code>import excel from 'xlsx';
let fileName = "newData.xlsx";
let workbook = excel.readFile(fileName);
console.log(workbook) //should print an array with the excel file data
</code></pre>

<p>assuming a spreadsheet with name 'newData.xlsx' in your root folder.
Then its just a matter of figuring out how to access the data you want.
<a href="https://www.npmjs.com/package/xlsx#cell-object" rel="nofollow noreferrer">This</a> should also be helpful.</p>


blocks|key|43616|text|我正在扩展@AshishDeshpande答案，我使用了相同的库react+excel-rendere，如果您有来自后端api调用的文件，即使用axios，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43617|如果我们检查@AshishDeshpande的演示代码，|43618|https://github.com/ashishd751/excel-renderer-demo/blob/master/src/App.js|offset|length|43619|我在fileHandler()中添加了openFileBrowser()函数，|43620|openFileBrowser+=+()+=>+{
++++++++
++++++axios({
++++++++url:'http://127.0.0.1:5000/display',
++++++++method:'GET',
++++++++responseType:+'blob'
++++++})
++++++.then((response)+=>+{
++++++++++++++++++const+url+=+(new+File([response.data],+"file.xlsx",+{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",+lastModified:new+Date().getTime()}));

++++++++++++++++++console.log(url);
+++++++++++++++++
++++++++++++++++++let+fileName+=+url.name;
++++++++++++++++++console.log(url);
++++++++++++++++++
++++++++++++++++++//check+for+file+extension+and+pass+only+if+it+is+.xlsx+and+display+error+message+otherwise
++++++++++++++++++if(fileName.slice(fileName.lastIndexOf('.')%2B1)+===+"xlsx"){
++++++++++++++++++++this.setState({
++++++++++++++++++++++uploadedFileName:+fileName,
++++++++++++++++++++++isFormInvalid:+false
++++++++++++++++++++});
++++++++++++++++++++this.renderFile(url)
++++++++++++++++++}++++
++++++++++++++++++else{
++++++++++++++++++++this.setState({
++++++++++++++++++++++isFormInvalid:+true,
++++++++++++++++++++++uploadedFileName:+""
++++++++++++++++++++})
++++++++++++++++++}
+++++++++++++++++
++++++++++++++++++
++++})
++++}|code-block|syntax|javascript|43621|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|20|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|E]]]]

<p>I am extending @AshishDeshpande answer, I used the same library react-excel-rendere
If you have file coming from backend api call, the using axios, you can do below:</p>
<p>if we check demo code from @AshishDeshpande ,</p>
<p><a href="https://github.com/ashishd751/excel-renderer-demo/blob/master/src/App.js" rel="nofollow noreferrer">https://github.com/ashishd751/excel-renderer-demo/blob/master/src/App.js</a></p>
<p>I added fileHandler() function in openFileBrowser(),</p>
<pre><code>openFileBrowser = () =&gt; {
        
      axios({
        url:'http://127.0.0.1:5000/display',
        method:'GET',
        responseType: 'blob'
      })
      .then((response) =&gt; {
                  const url = (new File([response.data], &quot;file.xlsx&quot;, {type:&quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&quot;, lastModified:new Date().getTime()}));

                  console.log(url);
                 
                  let fileName = url.name;
                  console.log(url);
                  
                  //check for file extension and pass only if it is .xlsx and display error message otherwise
                  if(fileName.slice(fileName.lastIndexOf('.')+1) === &quot;xlsx&quot;){
                    this.setState({
                      uploadedFileName: fileName,
                      isFormInvalid: false
                    });
                    this.renderFile(url)
                  }    
                  else{
                    this.setState({
                      isFormInvalid: true,
                      uploadedFileName: &quot;&quot;
                    })
                  }
                 
                  
    })
    }
</code></pre>


blocks|key|887451|text|，然后将这段代码添加到app.js中，只需更改列名(即InputA和InputB)+--这些都是为我准备的--如果想添加其他列，您可以这样做。希望这能帮到你。请随意评论(这是我在stackoverflow).上的第一个回答|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|887452|import+React,+{+useState+}+from+"react";
import+"./App.css";
import+*+as+XLSX+from+"xlsx";
function+App()+{
++const+[items,+setItems]+=+useState([]);

++const+readExcel+=+(file)+=>+{
++++const+promise+=+new+Promise((resolve,+reject)+=>+{
++++++const+fileReader+=+new+FileReader();
++++++fileReader.readAsArrayBuffer(file);

++++++fileReader.onload+=+(e)+=>+{
++++++++const+bufferArray+=+e.target.result;

++++++++const+wb+=+XLSX.read(bufferArray,+{+type:+"buffer"+});

++++++++const+wsname+=+wb.SheetNames[0];

++++++++const+ws+=+wb.Sheets[wsname];

++++++++const+data+=+XLSX.utils.sheet_to_json(ws);

++++++++resolve(data);
++++++};

++++++fileReader.onerror+=+(error)+=>+{
++++++++reject(error);
++++++};
++++});

++++promise.then((d)+=>+{
++++++setItems(d);
++++});
++};

++return+(
++++<div>
++++++<input
++++++++type="file"
++++++++onChange={(e)+=>+{
++++++++++const+file+=+e.target.files[0];
++++++++++readExcel(file);
++++++++}}
++++++/>

++++++<table+class="table+container">
++++++++<thead>
++++++++++<tr>
++++++++++++<th+scope="col">InputA</th>
++++++++++++<th+scope="col">InputB</th>
++++++++++</tr>
++++++++</thead>
++++++++<tbody>
++++++++++{items.map((d)+=>+(
++++++++++++<tr+key={d.InputA}>
++++++++++++++<th>{d.InputA}</th>
++++++++++++++<td>{d.InputB}</td>
++++++++++++</tr>
++++++++++))}
++++++++</tbody>
++++++</table>
++++</div>
++);
}

export+default+App;|code-block|syntax|javascript|887453|entityMap^0|2M|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Make react app, then add this code to app.js, just change column name(i.e. InputA and InputB) these were for me and if want to add other columns you can do that.
Hope this might help you. Feel free to comment (This is my first answer on stack<strong>overflow</strong>).</p>
<pre><code>import React, { useState } from &quot;react&quot;;
import &quot;./App.css&quot;;
import * as XLSX from &quot;xlsx&quot;;
function App() {
  const [items, setItems] = useState([]);

  const readExcel = (file) =&gt; {
    const promise = new Promise((resolve, reject) =&gt; {
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);

      fileReader.onload = (e) =&gt; {
        const bufferArray = e.target.result;

        const wb = XLSX.read(bufferArray, { type: &quot;buffer&quot; });

        const wsname = wb.SheetNames[0];

        const ws = wb.Sheets[wsname];

        const data = XLSX.utils.sheet_to_json(ws);

        resolve(data);
      };

      fileReader.onerror = (error) =&gt; {
        reject(error);
      };
    });

    promise.then((d) =&gt; {
      setItems(d);
    });
  };

  return (
    &lt;div&gt;
      &lt;input
        type=&quot;file&quot;
        onChange={(e) =&gt; {
          const file = e.target.files[0];
          readExcel(file);
        }}
      /&gt;

      &lt;table class=&quot;table container&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;InputA&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;InputB&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          {items.map((d) =&gt; (
            &lt;tr key={d.InputA}&gt;
              &lt;th&gt;{d.InputA}&lt;/th&gt;
              &lt;td&gt;{d.InputB}&lt;/td&gt;
            &lt;/tr&gt;
          ))}
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>


blocks|key|43581|text|这需要的日期时间|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43582|​|43583|const+parseDate+=+v+=>+{
++const+d+=+v+-+1;
++const+t+=+Math.round((d+-+Math.floor(d))+*+24+*+60+*+60);
++console.log('parseDate+d+',+d,+'t',+t);
++return+moment(new+Date(1900,+0,+d,+0,+0,+t)).format('YYYY-MM-DD');
};

const+dateStr+=+parseDate(43523);
console.log('dateStr+',+dateStr)|code-block|syntax|javascript|43584|<script+src="https://momentjs.com/downloads/moment.js"></script>|43585|43586|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>datetime need for this</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const parseDate = v =&gt; {
  const d = v - 1;
  const t = Math.round((d - Math.floor(d)) * 24 * 60 * 60);
  console.log('parseDate d ', d, 't', t);
  return moment(new Date(1900, 0, d, 0, 0, t)).format('YYYY-MM-DD');
};

const dateStr = parseDate(43523);
console.log('dateStr ', dateStr)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://momentjs.com/downloads/moment.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I am new to react JS. I am trying to perform uploading Excel sheet file using react.js and display data to a table. I got 
partial reference from the link but, it is not complete. Please help with it.  <a href="https://stackoverflow.com/questions/46653807/importing-data-from-excel-and-displaying-in-a-react-component/51071069">Importing data from excel and displaying in a react component</a></p>


How to upload an Excel sheet file using react.js and display data to a table

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我对JS的反应是新的。我试图使用react.js上传Excel表格文件，并将数据显示到表中。我从链接中得到了部分参考，但是，它还没有完成。请帮忙。

问如何使用react.js上载Excel工作表文件并将数据显示到表中
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用react.js上载Excel工作表文件并将数据显示到表中EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用react.js上载Excel工作表文件并将数据显示到表中
EN