Opening an Excel document within an Angular 2 environment

I'm currently working with ng2-File-upload and I am looking to extract data from an Excel file, including all its rows, in order to determine the total count. Do you know if it is possible to accomplish this using the ng2-File-upload module? If not, do you have any suggestions on how to achieve this task using plain JavaScript or typescript?

Answer №1

The solution provided in the approved response was very helpful to me. ng2-file-upload offers an uploader with a callback function this.uploader.onAfterAddingFile. I simply invoked my change function and proceeded to read the file like so:

 onFileChange(file: any) {
    /* setting up file reader */
    //const target: DataTransfer = <DataTransfer>(evt.target);
    //if (target.files.length !== 1) throw new Error('Cannot use multiple files');
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
        /* reading workbook */
        const bstr: string = e.target.result;
        const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

        /* extracting first sheet */
        const wsname: string = wb.SheetNames[0];
        const ws: XLSX.WorkSheet = wb.Sheets[wsname];

        /* saving data */
        var data = <any>(XLSX.utils.sheet_to_json(ws, { header: 1 }));
        this.totalInventories = data.length > 0 ? data.length - 1 : 0;
    };
    if (file._file)
        reader.readAsBinaryString(file._file);
 }

I hope this explanation proves beneficial to others as well :)

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

Adjust the Highcharts semi-pie design by eliminating the gap between the pie and the legend

I'm having trouble adjusting the spacing between the bottom of a semi circle donut chart in Highcharts and the legend below it. Despite my efforts, I have not been successful in reducing this gap. Here is the basic chart I am currently working on: h ...

Execute `preventDefault` prior to authenticating the User with Dev

In my index, I have a modal with a user sign-up form. I created a JavaScript function that triggers when the "Save" button is clicked. If users encounter errors, alerts appear in the modal but it redirects to another page. I want the page to stay on the c ...

Effect triggered upon scrolling to the top or bottom of the page

Would greatly appreciate your help in identifying errors in my script. Can someone point out where I might be going wrong? I am using two plugins - the first for custom scrollbar changes, and the second which I have cut and pasted into the first call. Bel ...

Is it possible for an ul to be displayed beneath a white section within an li

I am working on a JQuery carousel that is displaying correctly, but I want to make a small adjustment to the content: <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none ...

Transferring data from a child component to a parent component in Angular using @ViewChild requires providing 2 arguments

Currently, I am attempting to transmit data using @Output & EventEmitter and @ViewChild & AfterViewInit from a child component to a parent component. Below is the code from my parent component .html file: <app-child (filterEvent)=" getValu ...

Having trouble uploading data to the database using a combination of Vue.js and Laravel backend framework

I've been facing an issue where my attempt to submit a record to my SQL database from a Vue component using Laravel API is not yielding any results. Despite comparing my code with other functioning examples, I have yet to find a solution. Below is th ...

Why do object == this, but object.member != this.member in the realm of Javascript?

I currently have an object labeled o along with a reference to it. Inside the scope of object o, I define a member named m. Within object o, I execute: o.m = "blah" When I try to access m outside of object o: console.log(o.m) The output is not "blah" ...

Once the data has been successfully loaded via Ajax, I intend to utilize another Ajax request to switch the image to loading.gif

$.ajax({ type: "POST", url: requestUrl, contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { for (var i = 0; i < data.posts.length; i++) { ...

Transforming the data type of a variable

Recently, I decided to switch my file name from index.js to index.ts. Here's an example of the issue I'm facing: let response = "none" let condition = true if(condition){ response = {id: 123 , data: []} } console.log(response) Howev ...

trouble seeing images with an array input and ngFor in Angular

I am encountering issues while attempting to exhibit an array of images by their source link using ngFor. It seems like there are errors hindering the functionality! Below is the image HTML code located within my card component: <div class="Session-Pa ...

Is it considered a secure practice to compare a user's IP address with the logged-in session's

I have created a JavaScript game using the HTML5 canvas tag that communicates with a server through AJAX to update the database. The issue I am facing is that users are able to manipulate data sent to the server, potentially leading to unauthorized actions ...

Respond to the initial message within the "if" statement

client.on('message', message => { if (message.channel.type === 'text' && message.channel.name.toLowerCase() == "channel-2" && message.content === "test") { message.react("✅") } ...

Push function is not available in Redux

Currently, I am facing an issue while trying to use the state of a component in other components. Since this state needs to be accessed by multiple components, I have decided to switch to Redux. However, I encountered an error 'newUsers.push is not a ...

Unexpected twist observed when custom curve is applied to Threejs TubeGeometry

After creating a custom curve applied to TubeGeometry, I noticed an interesting behavior. The curve's vertices on the X axis change based on mouse movement, while the Z axis follows a simple sin curve affected by time. The code snippet below demonstra ...

Tips on adding custom fonts for text geometry in three.js

Currently, I am delving into the realm of three.js to create text geometry, although my expertise in JavaScript is fairly limited. Initially, I attempted to utilize my custom JSON font, which resulted in the same error encountered when using fonts from th ...

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

Tips for changing the theme color in applications such as Angular

Is there a way to dynamically change the theme color within the head tag in angular 4 applications? <meta name="theme-color" content="#db5945"> ...

Transform the entire content with a simple click on input labels

tab3 > brand-sidebar-wrapper > lacquer-type-wrapper > input Whenever I click on the input labels, the .content div moves to the top and leaves a lot of space at the bottom. I have attempted to modify the JavaScript code, but the issue seems to b ...

Is there a way to extract a single value from an array of data and convert it into a series of values separated by commas, all using JavaScript but without

Here is an array data in a specific format: const data= [ { name: "productname", id: "1356", price: "0.00", category: "Health", position: "1", list: "New Products", ...

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...