Cara mem-parsing file Excel dalam Javascript / HTML5

136

Saya dapat membaca file Excel melalui FileReadertetapi output teks serta karakter aneh dengannya. Saya perlu membaca xlsbaris-bijaksana file, membaca data di setiap kolom dan mengubahnya menjadi JSON.

Bagaimana cara membaca file xls baris demi baris?

ducktyped
sumber
1
duplikat mungkin Bagaimana cara membaca konten file excel di sisi klien?
Beberapa programmer dude
1
@ JoachimPileborg: ini tidak menjawab pertanyaan. Saya perlu membaca file excel baris demi baris. Meskipun saya bisa membacanya menggunakan FileReader (HTML5) tetapi masih tidak dapat menelusuri baris.
ducktyped

Jawaban:

104

Fungsi di bawah ini mengubah data lembar Excel (format XLSX) ke JSON. Anda dapat menambahkan janji ke fungsi.

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

Di bawah posting memiliki kode untuk format XLS, Excel to JSON, kode javascript?

Peru
sumber
1
crash untuk file excel yang lebih besar di chrome, ada solusi bagus untuk itu?
Zed
Bolehkah saya tahu seberapa besar file Anda?
Peru
6
e.target.result () harus e.target.result, lihat developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
user227353
3
Bagi saya, saya harus mendeklarasikan jszip.jsskrip sebelumnya xlsx.js.
Florin Vîrdol
1
Bagaimana saya bisa menetapkan json_object ke variabel publik dan mengaksesnya di luar for for?
Shardul
109

Pertanyaan lama, tapi saya harus perhatikan bahwa tugas umum parsing file XLS dari javascript membosankan dan sulit tetapi bukan tidak mungkin.

Saya memiliki parser dasar diimplementasikan di JS murni:

Kedua halaman adalah parser XLS / XLSX yang digerakkan oleh API File HTML5 (Anda dapat menyeret-jatuhkan file Anda dan itu akan mencetak data dalam sel dalam daftar yang dipisahkan koma). Anda juga dapat menghasilkan objek JSON (dengan asumsi baris pertama adalah baris tajuk).

Test suite http://oss.sheetjs.com/ menunjukkan versi yang menggunakan XHR untuk mendapatkan dan mem-parsing file.

SheetJS
sumber
4
Jika Anda bisa menambahkan beberapa kode sampel ke jawabannya, itu akan membuatnya jauh lebih baik (juga tambahkan diaclaimer jika Anda adalah pemimpin perpustakaan).
acdcjunior
3
Saya membuat blog tentang psjinx.com/programming/2014/01/04/... :) ini
pankaj28843
dapatkah kita melewati beberapa baris dan kolom atas xlsx dengan JS-XLSX?
mayank
19

Unggah di excel filesini dan Anda bisa mendapatkan data dalam JSONformat di 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>

Ini adalah kombinasi dari Stackoverflowposting berikut :

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

Semoga berhasil...

Akash
sumber
14

Kode ini dapat membantu Anda.
Sebagian besar waktu jszip.js tidak berfungsi, sertakan juga xlsx.full.min.js dalam kode js Anda.

Kode Html

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

Javascript

<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
sumber
Bagaimana dengan Jika saya ingin mengunggah gambar juga dalam lembar excel
Mayur Agarwal
9

Jika Anda ingin cara paling sederhana dan terkecil untuk membaca file * .xlsx di browser, maka perpustakaan ini mungkin melakukannya:

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.
  })
})

Dalam contoh di atas dataadalah data string mentah. Itu dapat diuraikan ke JSON dengan skema yang ketat dengan melewati schemaargumen. Lihat dokumen API untuk contohnya.

API API: http://npmjs.com/package/read-excel-file

catamphetamine
sumber
4

Terima kasih atas jawaban di atas, saya pikir ruang lingkup (jawaban) selesai tetapi saya ingin menambahkan "cara bereaksi" untuk siapa pun yang menggunakan reaksi.

Buat file bernama 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)}/>
        );
    }
}

Kemudian Anda dapat menggunakan komponen dalam metode render seperti:

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

<ImportData/>akan mengatur data ke statusnya sendiri, Anda dapat mengakses data Excel di "komponen induk" dengan mengikuti ini :

Gerbang Sion
sumber
Saya pikir tag dalam pernyataan pengembalian seharusnya <ImportData/>bukan <importData/>. Saya cukup baru untuk Bereaksi tetapi saya yakin nama komponen selalu ditulis dengan huruf besar. Bagaimanapun, itu adalah nama yang digunakan saat mengimpor dalam contoh.
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>

amin
sumber
0

Jika Anda bertanya-tanya bagaimana cara membaca file dari server kode ini mungkin bisa membantu.

Pembatasan:

  1. File harus di server (Lokal / Remote).
  2. Anda harus mengatur tajuk atau memiliki plugin google CORS.

<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>
Vijay Reddy
sumber
0

termasuk xslx.js, xlsx.full.min.js, jszip.js

menambahkan event handler yang diganti ke input file

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
sumber
-4

XLS adalah format biner yang digunakan oleh Microsoft. Parsing XLS dengan bahasa sisi server sangat sulit tanpa menggunakan pustaka tertentu atau Office Interop. Melakukan ini dengan javascript adalah misi yang mustahil. Berkat API File HTML5 Anda dapat membaca konten binernya tetapi untuk mengurai dan menafsirkannya, Anda perlu menyelami spesifikasi format XLS . Mulai dari Office 2007, Microsoft menganut format file Open XML ( xslxuntuk Excel) yang merupakan standar.

Darin Dimitrov
sumber
@ducktyped, saya tidak sadar atau melihat kode javascript yang membaca file biner Excel.
Darin Dimitrov
13
Misi yang mustahil? Aku meragukan itu. Jika kita dapat menjalankan kernel Linux di javascript sisi klien, maka seharusnya dimungkinkan untuk mem-parsing file biner Excel. Hanya saja belum ada yang setahu saya yang melakukannya.
JP Richardson
Berikut adalah dokumentasi untuk penasaran dengan struktur 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); nilai var = sheet.Range ("A1");

ketika Anda memiliki lembaran itu. Anda bisa menggunakan fungsi VBA seperti yang Anda lakukan di Excel.

i100
sumber
6
ini hanya bekerja dengan "teman kami" IE. Dan saya perlu menggunakan HTML5. Saya hanya perlu menelusuri konten teks aktual baris demi baris.
ducktyped