Javascript / HTML5에서 Excel 파일을 구문 분석하는 방법


136

Excel 파일을 읽을 수는 FileReader있지만 텍스트와 이상한 문자를 출력합니다. 나는 읽을 필요가 xls모든 열에서 파일 행 방향, 데이터 읽기 및 JSON으로 변환합니다.

xls 파일을 행 단위로 읽는 방법은 무엇입니까?



1
@ JoachimPileborg : 이것은 질문에 대답하지 않습니다. Excel 파일을 한 행씩 읽어야합니다. FileReader (HTML5)를 사용하여 읽을 수는 있지만 여전히 행을 찾아 볼 수는 없습니다.
ducktyped

답변:


104

아래 함수는 Excel 시트 (XLSX 형식) 데이터를 JSON으로 변환합니다. 함수에 약속을 추가 할 수 있습니다.

<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 자바 스크립트 코드로 사용합니까?


1
크롬에서 더 큰 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.
Florin Vîrdol

1
json_object를 공용 변수에 할당하고 for 루프 외부에 액세스하려면 어떻게해야합니까?
Shardul

109

오래된 질문이지만 자바 스크립트에서 XLS 파일을 구문 분석하는 일반적인 작업은 지루하고 어렵지만 불가능하지는 않습니다.

순수한 JS로 기본 파서를 구현했습니다.

두 페이지 모두 HTML5 파일 API 기반 XLS / XLSX 파서입니다. 파일을 끌어다 놓으면 셀의 데이터가 쉼표로 구분 된 목록으로 인쇄됩니다. JSON 객체를 생성 할 수도 있습니다 (첫 번째 행이 헤더 행이라고 가정).

테스트 스위트 http://oss.sheetjs.com/ 은 XHR을 사용하여 파일을 가져오고 구문 분석하는 버전을 보여줍니다.


4
답변에 샘플 코드를 추가 할 수 있다면 훨씬 더 나아질 것입니다 (라이브러리 리더 인 경우 발음 부호를 추가하십시오).
acdcjunior


JS-XLSX로 xlsx의 최상위 행과 열을 건너 뛸 수 있습니까?
mayank

19

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

행운을 빕니다...


14

이 코드는
대부분 jszip.js가 작동하지 않으므로 js 코드에 xlsx.full.min.js를 포함시키는 데 도움이 됩니다.

HTML 코드

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

자바 스크립트

<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]);
    };

내가 엑셀 시트뿐만 아니라 이미지를 업로드 할 경우 약
Mayur 아가 왈

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


4

위의 답변에 감사드립니다. (답변의) 범위가 완료된 것으로 생각하지만 반응을 사용하는 사람에게 "반응 방식"을 추가하고 싶습니다.

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 데이터에 액세스 할 수 있습니다 :


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>


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>

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);

}

-4

XLS는 Microsoft에서 사용하는 이진 독점 형식입니다. 특정 라이브러리 나 Office Interop을 사용하지 않으면 서버 측 언어로 XLS를 구문 분석하는 것이 매우 어렵습니다. 자바 스크립트 로이 작업을 수행하는 것은 불가능합니다. HTML5 파일 API 덕분에 이진 컨텐츠를 읽을 수 있지만 구문 분석하고 해석 하려면 XLS 형식스펙으로 뛰어 들어야합니다 . Microsoft는 Office 2007부터 표준 인 Open XML 파일 형식 ( xslxExcel 용)을 채택했습니다.


@ ducktyped, 바이너리 Excel 파일을 읽는 Javascript 코드를 인식하지 못했거나 보지 못했습니다.
Darin Dimitrov

13
불가능한 임무? 나는 그것을 의심한다. 클라이언트 측 자바 스크립트에서 Linux 커널을 실행할 수 있다면 바이너리 Excel 파일을 구문 분석 할 수 있어야합니다. 내 지식에 아무도 아직 그 일을하지 않았다는 것입니다.
JP Richardson

다음은 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 기능을 사용할 수 있습니다.


6
이것은 "우리의 사랑하는 친구"IE에서만 작동합니다. 그리고 HTML5를 사용해야합니다. 실제 텍스트 내용을 한 행씩 찾아보기 만하면됩니다.
ducktyped
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.