जावास्क्रिप्ट / HTML5 में एक्सेल फाइल को पार्स कैसे करें


136

मैं एक्सेल फाइल को पढ़ने में सक्षम हूं, FileReaderलेकिन यह टेक्स्ट के साथ-साथ अजीब पात्रों को भी आउटपुट करता है। मुझे xlsफ़ाइल पंक्ति-वार पढ़ने की ज़रूरत है , हर कॉलम में डेटा पढ़ें और इसे JSON में बदलें।

पंक्ति द्वारा xls फ़ाइल पंक्ति कैसे पढ़ें?



1
@JoachimPileborg: इस सवाल का जवाब नहीं है। मुझे पंक्ति द्वारा एक्सेल फ़ाइल पंक्ति को पढ़ने की आवश्यकता है। हालांकि मैं इसे FileReader (HTML5) का उपयोग करके पढ़ सकता हूं लेकिन फिर भी पंक्तियों को ब्राउज़ करने में असमर्थ हूं।
ducktyped

जवाबों:


104

नीचे फ़ंक्शन एक्सेल शीट (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 प्रारूप एक्सेल से JSON जावास्क्रिप्ट कोड के लिए कोड है?


1
यह क्रोम में बड़ी एक्सेल फाइल के लिए क्रैश हो जाता है, उसके लिए कोई अच्छा उपाय?
जेड

क्या मुझे पता है कि आपकी फ़ाइल कितनी बड़ी है?
पेरू

6
e.target.result () होना चाहिए
e.target.result

3
मेरे लिए, मुझे jszip.jsपहले स्क्रिप्ट की घोषणा करनी थी xlsx.js
फ्लोरिन V Florrdol

1
मैं सार्वजनिक चर के लिए json_object कैसे निर्दिष्ट कर सकता हूं और इसे लूप के लिए एक्सेस कर सकता हूं?
शार्दुल

109

पुराना सवाल है, लेकिन मुझे ध्यान देना चाहिए कि जावास्क्रिप्ट से XLS फ़ाइलों को पार्स करने का सामान्य कार्य थकाऊ और कठिन है लेकिन असंभव नहीं है।

मेरे पास शुद्ध जेएस में लागू किए गए बुनियादी पार्सर्स हैं:

दोनों पृष्ठ HTML5 फ़ाइल API- संचालित XLS / XLSX पार्सर हैं (आप अपनी फ़ाइल को ड्रैग-ड्रॉप कर सकते हैं और यह कॉमा से अलग की गई सूची में डेटा को प्रिंट करेगा)। आप JSON ऑब्जेक्ट्स भी उत्पन्न कर सकते हैं (पहली पंक्ति को हेडर पंक्ति मानकर)।

परीक्षण सूट http://oss.sheetjs.com/ एक संस्करण दिखाता है जो फ़ाइलों को प्राप्त करने और पार्स करने के लिए XHR का उपयोग करता है।


4
यदि आप उत्तर में कुछ नमूना कोड जोड़ सकते हैं, तो यह बहुत बेहतर बना देगा (यदि आप पुस्तकालयों के नेता हैं तो एक डिसक्लेमर भी जोड़ें)।
acccjunior

3
मैंने इस psjinx.com/programming/2014/01/04/… :) के बारे में ब्लॉग किया
pankaj28843

हम JS-XLSX के साथ xlsx की कुछ शीर्ष पंक्तियों और स्तंभों को छोड़ सकते हैं?
मयंक

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

क्या होगा अगर मैं एक्सेल शीट में चित्र अपलोड करना चाहता हूं
मयूर अग्रवाल

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तर्क द्वारा पारित किया जा सकता है। उदाहरण के लिए एपीआई डॉक्स देखें।

एपीआई डॉक्स: 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)}/>
        );
    }
}

तब आप रेंडर विधि में घटक का उपयोग कर सकते हैं जैसे:

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

<ImportData/>अपनी ही राज्य के लिए डेटा सेट होता है, यदि आप Excel डेटा "जनक घटक" में पालन करके उपयोग कर सकते हैं इस :


मुझे लगता है कि रिटर्न स्टेटमेंट में टैग <ImportData/>इसके बजाय होना चाहिए <importData/>। मैं रिएक्ट के लिए काफी नया हूं लेकिन मेरा मानना ​​है कि घटक नाम हमेशा पूंजीकृत होते हैं। किसी भी स्थिति में, उदाहरण में आयात करते समय उपयोग किया जाने वाला नाम है।
२०:२० बजे जुबान

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. आपको हेडर सेटअप करना होगा या कॉर्स गूगल प्लगइन करना होगा।

<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 शामिल करें

फ़ाइल इनपुट के लिए एक ऑनकास्ट ईवेंट हैंडलर जोड़ें

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 को पार्स करना कुछ विशिष्ट लाइब्रेरी या ऑफिस इंटरॉप का उपयोग किए बिना बहुत मुश्किल है। जावास्क्रिप्ट के साथ ऐसा करना मिशन असंभव है। एचटीएमएल 5 फ़ाइल एपीआई के लिए धन्यवाद आप इसकी बाइनरी सामग्री पढ़ सकते हैं लेकिन इसे पार्स करने और इसकी व्याख्या करने के लिए आपको एक्सएलएस प्रारूप के विनिर्देशों में गोता लगाने की आवश्यकता होगी । Office 2007 से शुरू, Microsoft ने ओपन XML फ़ाइल स्वरूपों ( xslxएक्सेल के लिए) को अपनाया जो एक मानक है।


@ducktyped, मुझे पता नहीं है और न ही कोई जावास्क्रिप्ट कोड देखा है जो बाइनरी एक्सेल फाइल पढ़ता है।
डारिन दिमित्रोव

13
असंभव लक्ष्य? मुझे शक है। यदि हम क्लाइंट-साइड जावास्क्रिप्ट में लिनक्स कर्नेल चला सकते हैं, तो बाइनरी एक्सेल फाइल को पार्स करना संभव होना चाहिए। यह सिर्फ इतना है कि मेरे ज्ञान में से किसी ने अभी तक नहीं किया है।
जेपी रिचर्डसन

यहाँ ms xls संरचना msdn.microsoft.com/en-us/library/office/… के
djra

-5

var excel = नया ActiveXObject ("Excel.Application"); var book = excel.Workbooks.Open (your_full_file_name_here.xls); var sheet = book.heets.Item (1); var value = sheet.Range ("A1");

जब आपके पास चादर हो। आप VBA फ़ंक्शन का उपयोग कर सकते हैं जैसा कि आप एक्सेल में करते हैं।


6
यह केवल "हमारे प्रिय मित्र" IE के साथ काम करता है। और मुझे HTML5 का उपयोग करने की आवश्यकता है। मुझे केवल पंक्ति द्वारा वास्तविक पाठ सामग्री पंक्ति ब्राउज़ करने की आवश्यकता है।
ducktyped
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.