如何用Javascript / HTML5解析Excel文件

136

我能够通过读取Excel文件，FileReader但它会输出文本以及奇怪的字符。我需要按xls行读取文件，读取每一列中的数据并将其转换为JSON。

如何逐行读取xls文件？

javascript  json  html  xls  filereader 
— 鸭型
source
1
— 一些程序员伙计
1
@JoachimPileborg：这不能回答问题。我需要逐行阅读excel文件。虽然我可以使用FileReader（HTML5）读取它，但是仍然无法浏览行。
— 鸭式打字

Answers:

104

函数下方将Excel工作表（XLSX格式）数据转换为JSON。您可以向函数添加promise。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {

  this.parseExcel = function(file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });

      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);

      })

    };

    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };
};
</script>

以下帖子有XLS格式Excel到JSON javascript代码的代码？

— 秘鲁
source
1
对于chrome中的较大excel文件，它会崩溃，对此有什么好的解决方案吗？
— Zed
我可以知道您的文件有多大吗？
— 秘鲁
6
e.target.result（）应该是e.target.result，请参阅developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
— user227353
3
对我来说，我必须先声明jszip.js脚本xlsx.js。
— FlorinVîrdol18年
1
如何将json_object分配给公共变量并在for循环外访问它？
— Shardul
109

这是个老问题，但我应该注意，从javascript解析XLS文件的一般任务既繁琐又困难，但并非不可能。

我有在纯JS中实现的基本解析器：

这两个页面都是HTML5 File API驱动的XLS / XLSX解析器（您可以拖放文件，它会以逗号分隔的列表形式打印出单元格中的数据）。您还可以生成JSON对象（假设第一行是标题行）。

测试套件http://oss.sheetjs.com/显示了一个使用XHR来获取和解析文件的版本。

— SheetJS
source
4
如果您可以将一些示例代码添加到答案中，那么它会变得更好（如果您是库的领导者，还可以添加一个反问号）。
— acdcjunior 2013年
3
我写了关于psjinx.com/programming/2014/01/04/… :)的博客
— pankaj28843 2014年
我们可以使用JS-XLSX跳过xlsx的顶部几行吗？
— mayank 2015年
18

在excel file此处上传一个，您可以获取以下JSON格式的数据console：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
    var ExcelToJSON = function() {

      this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          workbook.SheetNames.forEach(function(sheetName) {
            // Here is your object
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          })
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
  };

  function handleFileSelect(evt) {
    
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }


 
</script>

<form enctype="multipart/form-data">
    <input id="upload" type=file  name="files[]">
</form>

    <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

    <script>
        document.getElementById('upload').addEventListener('change', handleFileSelect, false);

    </script>
展开摘要

这是以下Stackoverflow帖子的组合：

  1. https://stackoverflow.com/a/37083658/4742733
  2. https://stackoverflow.com/a/39515846/4742733

祝好运...

— 阿卡什
source
14

该代码可以为您提供帮助
大多数情况下jszip.js无法正常工作，因此请在您的js代码中包含xlsx.full.min.js。

HTML代码

 <input type="file" id="file" ng-model="csvFile"  
    onchange="angular.element(this).scope().ExcelExport(event)"/>

Java脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js">
</script>

$scope.ExcelExport= function (event) {


    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});

        wb.SheetNames.forEach(function(sheetName){
        var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
        var jsonObj = JSON.stringify(rowObj);
        console.log(jsonObj)
        })
    };
    reader.readAsBinaryString(input.files[0]);
    };
— afzalriz304
source
如果我也想在Excel工作表中上传图片怎么办
— Mayur Agarwal '18
9

如果您想要在浏览器中读取* .xlsx文件的最简单，最微小的方法，则此库可以：

https://catamphetamine.github.io/read-excel-file/

<input type="file" id="input" />
import readXlsxFile from 'read-excel-file'

const input = document.getElementById('input')

input.addEventListener('change', () => {
  readXlsxFile(input.files[0]).then((data) => {
    // `data` is an array of rows
    // each row being an array of cells.
  })
})

在上面的示例中data是原始字符串数据。可以通过传递schema参数将其解析为具有严格模式的JSON 。有关示例，请参见API文档。

API文档：http： //npmjs.com/package/read-excel-file

— 苯丙胺
source
4

谢谢您提供上述答案，我认为（答案）的范围已经完成，但是我想为使用react的任何人添加“反应方式”。

创建一个名为importData.js的文件：

import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
    constructor(props){
        super(props);
        this.state={
            excelData:{}
        }
    }
    excelToJson(reader){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});
        var data = {};
        wb.SheetNames.forEach(function(sheetName){
             var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
             var rowString = JSON.stringify(rowObj);
             data[sheetName] = rowString;
        });
        this.setState({excelData: data});
    }
    loadFileXLSX(event){
        var input = event.target;
        var reader = new FileReader();
        reader.onload = this.excelToJson.bind(this,reader);
        reader.readAsBinaryString(input.files[0]);
    }
    render(){
        return (
            <input type="file" onChange={this.loadFileXLSX.bind(this)}/>
        );
    }
}

然后，您可以在render方法中使用组件，例如：

import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
    render(){
        return (<importData/>);
    }
}

<ImportData/>将数据设置为自己的状态，就可以通过Excel中的数据“父组件”按照这个：

— 锡安之门
source
我认为return语句中的标记应<ImportData/>改为<importData/>。我对React很陌生，但我相信组件名称总是大写。无论如何，这是示例中导入时使用的名称。
— rhaben
3 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
    var ExcelToJSON = function() {

      this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          workbook.SheetNames.forEach(function(sheetName) {
            // Here is your object
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          })
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
  };

  function handleFileSelect(evt) {
    
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }


 
</script>

<form enctype="multipart/form-data">
    <input id="upload" type=file  name="files[]">
</form>

    <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

    <script>
        document.getElementById('upload').addEventListener('change', handleFileSelect, false);

    </script>
展开摘要

— 阿敏
source
0

如果您想知道如何从服务器读取文件，则此代码可能会有所帮助。

限制条件：

  1. 文件应位于服务器中（本地/远程）。
  2. 您将必须设置标题或具有CORS google插件。

<Head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.4/xlsx.core.min.js"></script>
</head>

<body>
    <script>
    /* set up XMLHttpRequest */


    // replace it with your file path in local server
    var url = "http://localhost/test.xlsx";

    var oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "arraybuffer";

    oReq.onload = function(e) {
        var arraybuffer = oReq.response;

        /* convert data to binary string */
        var data = new Uint8Array(arraybuffer);

        var arr = new Array();
        for (var i = 0; i != data.length; ++i) {
            arr[i] = String.fromCharCode(data[i]);
        }

        var bstr = arr.join("");

        var cfb = XLSX.read(bstr, { type: 'binary' });

        cfb.SheetNames.forEach(function(sheetName, index) {

            // Obtain The Current Row As CSV
            var fieldsObjs = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);

            fieldsObjs.map(function(field) {
                $("#my_file_output").append('<input type="checkbox" value="' + field.Fields + '">' + field.Fields + '<br>');
            });

        });
    }

    oReq.send();
    </script>
</body>
<div id="my_file_output">
</div>

</html>
— 维杰·雷迪
source
0

包括xslx.js，xlsx.full.min.js，jszip.js

将onchange事件处理程序添加到文件输入 

function showDataExcel(event)
{
            var file = event.target.files[0];
            var reader = new FileReader();
            var excelData = [];
            reader.onload = function (event) {
                var data = event.target.result;
                var workbook = XLSX.read(data, {
                    type: 'binary'
                });

                workbook.SheetNames.forEach(function (sheetName) {
                    // Here is your object
                    var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

                    for (var i = 0; i < XL_row_object.length; i++)
                    {
                        excelData.push(XL_row_object[i]["your column name"]);

                    }

                    var json_object = JSON.stringify(XL_row_object);
                    console.log(json_object);
                    alert(excelData);
                })

            };

            reader.onerror = function (ex) {
                console.log(ex);
            };

            reader.readAsBinaryString(file);

}
— vsnahar
source
-4

XLS是Microsoft使用的二进制专有格式。如果不使用某些特定的库或Office Interop，使用服务器端语言解析XLS非常困难。使用javascript做到这一点是不可能的。借助HTML5 File API，您可以读取其二进制内容，但是为了解析和解释它，您需要深入了解XLS格式的规范。从Office 2007开始，Microsoft接受了标准的Open XML文件格式（xslx用于Excel）。

— 达林·迪米特罗夫（Darin Dimitrov）
source
@ducktyped，我不知道，也没有看到任何读取二进制Excel文件的javascript代码。
— Darin Dimitrov
13
不可能完成的任务？我对此表示怀疑。如果我们可以在客户端JavaScript中运行Linux内核，则应该可以解析二进制Excel文件。据我所知，还没有人做到这一点。
— JP理查森
这是对ms xls结构感到好奇的文档msdn.microsoft.com/en-us/library/office/…–
— djra
-5

var excel = new ActiveXObject（“ Excel.Application”）; var book = excel.Workbooks.Open（your_full_file_name_here.xls）; var sheet = book.Sheets.Item（1）; var value = sheet.Range（“ A1”）;

当你有床单时。您可以像在Excel中一样使用VBA函数。

— i100
source
6
这仅适用于“我们亲爱的朋友” IE。而且我需要使用HTML5。我只需要逐行浏览实际的文本内容。
— ducktyped
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.