我想在前端解析张表,返回一个JSON到后台,但是看了其他很多关于解析Excel的资料,都没有办法解决这个,请各位程序员门帮一下🦆

img


我想在前端解析张表,返回一个JSON到后台,但是看了其他很多关于解析Excel的资料,都没有办法解决这个,请各位程序员门帮一下🦆

找个支持前端JS的excel库开发即可

https://blog.csdn.net/u014241231/article/details/122615830

https://blog.csdn.net/weixin_41697143/article/details/129012128

js-xlsx

该回答引用ChatGPT
你可以使用第三方库 js-xlsx 来解析 Excel。以下是参考代码示例:

1. 安装 js-xlsx

bash
npm install xlsx


2. 引入 xlsx

javascript
import XLSX from 'xlsx';


3. 解析 Excel 并转换为 JSON

javascript
// 读取Excel文件,wb为工作簿对象
const wb = XLSX.readFile('filename.xlsx');

// 获取第1个工作表
const ws = wb.Sheets[wb.SheetNames[0]];

// 将Excel表格转换为JSON数据,第2个参数为JSON配置
const jsonData = XLSX.utils.sheet_to_json(ws, {header:1});


其中,filename.xlsx 为你要解析的 Excel 文件名。然后通过 XLSX.readFile() 方法将文件读取为工作簿对象 wb,接着取出第 1 个工作表 ws,最后将工作表转换为 JSON 数据。

总结一下,以下是完整的代码示例:

javascript
import XLSX from 'xlsx';

function parseExcelFile(filename) {
try {
// 读取Excel文件,wb为工作簿对象
const wb = XLSX.readFile(filename);

// 获取第1个工作表
const ws = wb.Sheets[wb.SheetNames[0]];

// 将Excel表格转换为JSON数据,第2个参数为JSON配置
const jsonData = XLSX.utils.sheet_to_json(ws, {header:1});

// 返回JSON数据
return jsonData;
} catch (err) {
// 错误处理
console.error(err);
}
}


你可以根据自己的需求进行进一步的封装和处理。

如果您想在前端解析Excel表,并将其转换为JSON格式,可以考虑使用一些现有的JavaScript库,如SheetJS或XLSX。这些库提供了一些方法来读取和解析Excel文件,并将其转换为JavaScript对象或JSON格式。

下面是一个示例代码片段,使用SheetJS库来读取并解析Excel文件,并将其转换为JSON格式:


```javascript
// 引入SheetJS库
import XLSX from 'xlsx';

// 假设Excel文件名为example.xlsx,读取文件并解析
const workbook = XLSX.readFile('example.xlsx');

// 获取第一个工作表
const worksheet = workbook.Sheets[workbook.SheetNames[0]];

// 将工作表数据转换为JSON格式
const data = XLSX.utils.sheet_to_json(worksheet);

// 打印JSON格式数据
console.log(data);



此示例假设您使用了ES6模块化语法,并已安装SheetJS库。如果您使用其他JavaScript库或框架,可以将代码进行相应调整。

注意,由于Excel文件可能包含大量数据和格式,因此解析可能需要一定时间和内存,具体取决于文件的大小和复杂性。如果您的Excel文件非常大,建议在后台进行解析,而不是在前端进行解析。

```

以下答案由GPT-3.5大模型与博主波罗歌共同编写:
你可以使用一些JavaScript库来读取和解析Excel文件,然后将数据转换为JSON格式并将其发送到后台。在此过程中,需要注意的一些事项是:

1.需要使用表格文件读取器JS-xlsx.js,它可将Excel文件转换为JSON格式。可以在https://github.com/SheetJS/js-xlsx上找到它。

2.您需要使用XMLHttpRequest对象将JSON数据发送到后端。在这个例子中,我们使用了jQuery来发送POST请求并传递JSON数据。

下面是完整的代码示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Excel to JSON</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>
  </head>
  <body>
    <input type="file" id="input">
    <br><br>
    <button onclick="handleFile();">Upload</button>
    <script>

      function handleFile() {
        // 获取文件
        var file = document.getElementById("input").files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
          // 获取Excel文件内容
          var data = e.target.result;
          var workbook = XLSX.read(data, {type: 'binary'});
          // 转换为JSON
          var sheet = workbook.Sheets[workbook.SheetNames[0]];
          var jsonData = XLSX.utils.sheet_to_json(sheet);
          // 发送JSON数据到后台
          $.ajax({
              type: "POST",
              url: "/upload",
              data: JSON.stringify(jsonData),
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function(data){
                  console.log(data);
              },
              error: function(errMsg) {
                  console.log(errMsg);
              }
          });
        };
        reader.readAsBinaryString(file);
      }

    </script>
  </body>
</html>

注意,此代码是一个基本的框架示例,可能需要根据具体需求进行修改和调整。
如果我的回答解决了您的问题,请采纳!