What is the process of reading an excel file in angularjs?

I attempted to read an Excel file by following a tutorial I found at . Unfortunately, I encountered an undefined situation in the highlighted line below while trying to do so in IE11.

var reader = new FileReader();

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

                obj.sheets = XLSXReader.utils.parseWorkbook(workbook, readCells, toJSON);
                handler(obj);
            }

            **reader.readAsBinaryString(file)**;

Answer №1

Below is an explanation of how to load a xlsx file from a server. For uploading, a different code snippet will be needed.

OPTION 1: To achieve this using the Alasql library, follow these steps:

Refer to files: 15utility.js and 84from.js for reference

readBinaryFile(filename,true,function(a){
    var workbook = X.read(data,{type:'binary'});
    // Perform operations on the parsed xlsx data
});

// Procedure for reading Binary files
// path - file path
// asy - true for async / false for sync

var readBinaryFile = utils.loadBinaryFile = function(path, asy, success, error) {
    if(typeof exports == 'object') {
        // For Node.js
        var fs = require('fs');
        var data = fs.readFileSync(path);
        var arr = new Array();
        for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
        success(arr.join(""));
    } else {
        // For browser
        var xhr = new XMLHttpRequest();
        xhr.open("GET", path, asy); // Async
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var data = new Uint8Array(xhr.response);
            var arr = new Array();
            for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            success(arr.join(""));
        };
        xhr.send();
    };
};

OPTION 2: Alternatively, you can directly use the Alasql library, which might offer a simpler solution.

alasql('SELECT * FROM XLSX("myfile.xlsx",{headers:true,sheetid:"Sheet2",range:"A1:D100"})',
     [],function(data) {
     console.log(res);
});

View examples here (simple Excel reading demo) or here (d3.js demo from Excel).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to refresh the appearance of clothing in Three.js

Currently, I am diving into the world of Three.js. My latest project involves adapting a shader that I originally created in Shader Toy to be displayed on my own webpage. The shader itself is a procedural terrain where users can navigate using the WASD key ...

AngularJS is not triggering the $watch function

I'm facing an issue with the $scope.$watch function, as it's not being triggered when expected. In my HTML document, I have a paginator using bootstrap UI: <pagination total-items="paginatorTotalItems" items-per-page="paginatorItemsPerPage" ...

Ordering a string of whole numbers using JavaScript

I'm currently working on a form that takes a string of numbers, splits them at each semi colon and space, sorts the numbers, and then displays the sorted list. However, when I click the button, the value in the text box doesn't get posted. Can ...

Struggling to access values from your model using EL in JavaScript? Let me provide some guidance

In my model, there is an object named "domain" with two methods: getDescriptionEn() and getDescriptionFr(). I am trying to retrieve the appropriate description based on the current locale. My issue lies in the following code snippet: var locale = "${cur ...

Assistance with Jquery for toggling checkboxes when labels are clicked

I'm currently working on a feature that allows for checking and unchecking checkboxes upon label click. You can find my Jsfiddle here: http://jsfiddle.net/PTAFG/1/ The HTML structure cannot be altered Here is the snippet of my HTML: <div style= ...

In what scenarios is it more suitable to utilize style over the sx prop in Material-UI?

When it comes to MUI components, the style and sx prop serve similar purposes. While the sx prop provides some shorthand syntaxes and access to the theme object, they essentially function the same way. So, when should you opt for one over the other? ...

"Implement image uploading and retrieval functionality in your application by utilizing Parse and Back4App with the help of Node

It seems like I have a question that may have already been answered, but I can't find the right solution for my issue. I'm facing trouble with my code and can't figure out what's wrong. The problem arises when I try to upload specific ...

A simple guide on how to display a child object in a materialUI select dropdown from a parent object

I am developing a ReactJS application where I aim to showcase child objects from the parent object in a dropdown using materialUI select. Despite attempting to iterate over the object using the map() function, I haven't been able to retrieve values up ...

Component-driven form validation in Angular 2

I'm facing a challenge with implementing model-driven form validation in my custom input component. Specifically, I need to figure out how to pass ngControl to the component. In the plunkr demo provided at http://plnkr.co/edit/QTmxl8ij5Z6E3xKh45hI?p= ...

Retrieve data with a web API

I am currently developing a web API to fetch data from a mock database using express My goal is to retrieve a JSON list containing all portfolios and their corresponding positions from the database module. Is there a way to structure the returned data so ...

Error: The function .join is not recognized by the sockets.io library in a Node.js client-server environment

I'm currently working on developing a chat app using node and vue js, and I've encountered an issue with the socket.io library. Specifically, I keep receiving an error stating that ".join is not a function" when trying to use it in my server-side ...

Prior activation of express render before parameter assessment

Seeking guidance as a newcomer to nodejs, express, and javascript. Here is the code I currently have: router.get('/', function(req, res, next) { const content = fileReader(); res.render('index', { "content" : content } ); }); ...

Strategies for resolving the problem of null values from getParameter() being passed from AJAX to servlet

After reading numerous answers on Stack overflow, I have tried various solutions to fix this issue without success. My goal is to send a JavaScript variable to a servlet using AJAX within an else statement in JS. However, I keep receiving null in the alert ...

What is the best way to convert HTML into a React component?

This is the situation I am facing : 1) The application requests a CMS (Content Management System) for page contents. 2) The CMS responds with "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>" 3) The applicat ...

Having trouble initiating an AJAX request

I'm currently facing an issue with inserting data into the database using AJAX. I have set up an ajax call to a servlet that is responsible for inserting data into the database. However, it seems like there might be an error in how I initialized the a ...

How can I extract several values from a child component in React?

Is there a way to retrieve two values in a single method of the Parent Component by passing props value from Child Component? What would be the best approach? Form.js (Child Component) // First method -> Extracting the suggestion value and passing i ...

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

My goal is to develop an app that generates a real-time updating google map, and I have been advised that AJAX requests can help achieve this. Nevertheless, after studying the documentation, I am uncertain about how to apply this method to solve my issue ...

Ways to display JSON in a structured format on an HTML page

Is there a way to display JSON in a formatted view on my html page? The JSON data is coming from a database and I want it to be displayed neatly like the following example: { "crews": [{ "items": [ { "year" : "2013", "boat" ...

reconfigure form credentials with JavaScript

I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...

Jasmine and AngularJS are able to effectively mock dependencies across multiple levels

I am a beginner in angular and jasmine, and I'm currently working on writing unit tests for existing code. One of the challenges I'm facing is creating mock dependencies within my jasmine unit test code. Below is a simplified version of the origi ...