วิธีแยกวิเคราะห์ไฟล์ Excel ใน Javascript / HTML5


136

ฉันสามารถอ่านไฟล์ Excel ได้FileReaderแต่มันแสดงผลเป็นข้อความและตัวอักษรแปลก ๆ ด้วย ฉันต้องการอ่านxlsแถวไฟล์อย่างชาญฉลาดอ่านข้อมูลในทุกคอลัมน์และแปลงเป็น JSON

วิธีอ่านไฟล์ xls ทีละแถว?



1
@JoachimPileborg: สิ่งนี้ไม่ตอบคำถาม ฉันต้องการอ่านไฟล์ excel ทีละแถว แม้ว่าฉันจะอ่านได้โดยใช้ FileReader (HTML5) แต่ก็ยังไม่สามารถเรียกดูแถวได้
Ducktyped

คำตอบ:


105

ด้านล่างฟังก์ชันจะแปลงข้อมูลแผ่นงาน 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 javascript code?


1
มันขัดข้องสำหรับไฟล์ excel ขนาดใหญ่ใน chrome ทางออกที่ดีสำหรับสิ่งนั้นหรือไม่
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 บริสุทธิ์:

ทั้งสองหน้าเป็นตัวแยกวิเคราะห์ XLS / XLSX ที่ขับเคลื่อนด้วย API ของไฟล์ HTML5 (คุณสามารถลาก - วางไฟล์ของคุณและมันจะพิมพ์ข้อมูลในเซลล์ในรายการที่คั่นด้วยจุลภาค) คุณยังสามารถสร้างออบเจ็กต์ JSON (สมมติว่าแถวแรกเป็นแถวส่วนหัว)

ชุดทดสอบhttp://oss.sheetjs.com/แสดงเวอร์ชันที่ใช้ XHR เพื่อรับและแยกวิเคราะห์ไฟล์


4
หากคุณสามารถเพิ่มโค้ดตัวอย่างลงในคำตอบได้ก็จะทำให้ดีขึ้นมาก (เพิ่ม diacclaimer ด้วยหากคุณเป็นผู้นำไลบรารี)
acdcjunior

3
ฉันเขียนบล็อกเกี่ยวกับเรื่องนี้psjinx.com/programming/2014/01/04/… :)
pankaj28843

เราสามารถข้ามแถวบนสุดและคอลัมน์ของ xlsx ด้วย JS-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 จะไม่ทำงานดังนั้นให้ใส่ xlsx.full.min.js ไว้ในโค้ด 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]);
    };

แล้วถ้าฉันต้องการอัปโหลดภาพในแผ่นงาน excel
Mayur Agarwal

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คือข้อมูลสตริงดิบ สามารถแยกวิเคราะห์เป็น JSON ด้วยสคีมาที่เข้มงวดโดยส่งผ่านschemaอาร์กิวเมนต์ ดูตัวอย่างเอกสาร API

เอกสาร API: http://npmjs.com/package/read-excel-file


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

จากนั้นคุณสามารถใช้ส่วนประกอบในวิธีการแสดงผลเช่น:

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

<ImportData/>จะตั้งค่าข้อมูลเป็นสถานะของตัวเองคุณสามารถเข้าถึงข้อมูล Excel ใน "องค์ประกอบหลัก" โดยทำตามสิ่งนี้ :


ผมคิดว่าแท็กในงบผลตอบแทนที่ควรจะเป็นแทน<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. ไฟล์ควรอยู่ในเซิร์ฟเวอร์ (Local / Remote)
  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 ใช้ การแยกวิเคราะห์ XLS ด้วยภาษาฝั่งเซิร์ฟเวอร์เป็นเรื่องยากมากโดยไม่ต้องใช้ไลบรารีเฉพาะหรือ Office Interop การทำเช่นนี้ด้วยจาวาสคริปต์เป็นภารกิจที่เป็นไปไม่ได้ ขอบคุณที่ HTML5 ไฟล์ API คุณสามารถอ่านเนื้อหาไบนารี แต่เพื่อที่จะแยกและตีความมันคุณจะต้องดำน้ำในรายละเอียดของรูปแบบ XLS เริ่มจาก Office 2007 Microsoft ใช้รูปแบบไฟล์Open XML ( xslxสำหรับ Excel) ซึ่งเป็นมาตรฐาน


@ducktyped ฉันไม่ทราบและไม่เห็นรหัสจาวาสคริปต์ใด ๆ ที่อ่านไฟล์ Excel แบบไบนารี
Darin Dimitrov

13
ภารกิจที่เป็นไปไม่ได้? ฉันสงสัยมัน. หากเราสามารถรันเคอร์เนล Linux ในจาวาสคริปต์ฝั่งไคลเอ็นต์ได้ก็ควรจะแยกวิเคราะห์ไฟล์ Excel แบบไบนารีได้ มันยังไม่มีใครรู้เลย
JP Richardson

นี่คือเอกสารสำหรับอยากรู้เกี่ยวกับโครงสร้าง ms xls msdn.microsoft.com/en-us/library/office/…
djra

-5

var excel = ActiveXObject ใหม่ ("Excel.Application"); หนังสือ var = excel.Workbooks.Open (your_full_file_name_here.xls); var sheet = book.SheetsItem (1); ค่า var = sheet.Range ("A1");

เมื่อคุณมีแผ่นงาน คุณสามารถใช้ฟังก์ชัน VBA ได้เช่นเดียวกับใน Excel


6
ใช้งานได้กับ IE "เพื่อนรักของเรา" เท่านั้น และฉันต้องใช้ HTML5 ฉันแค่ต้องเรียกดูเนื้อหาข้อความจริงทีละแถว
Ducktyped
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.