Exploring the Possibilities: Incorporating xlsx Files in Angular 5

Is there a way to read just the first three records from an xlsx file without causing the browser to crash? I need assistance with finding a solution that allows me to achieve this without storing all the data in memory during the parsing process.

P.S: I am currently using the following code snippet:

fileChange(event) {
    const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      const file: File = fileList[0];
      const reader = new FileReader();
      reader.onload = e => {
        const arrayBuffer = reader.result,
          data = new Uint8Array(arrayBuffer),
          arr = new Array();
        for (let i = 0; i !== data.length; ++i) {
          arr[i] = String.fromCharCode(data[i]);
        }

        const bstr = arr.join("");

        const workbook: XLSX.WorkBook = XLSX.read(bstr, { type: "binary" });
        const firstSheetName: string = workbook.SheetNames[0];
        const worksheet: XLSX.WorkSheet = workbook.Sheets[firstSheetName];
        this.setXlsxData(XLSX.utils.sheet_to_json(worksheet.slice(0,3)));
      };
      reader.readAsArrayBuffer(file);
    }
  }

  setXlsxData(data: Array<any>) {
    this.headers = Object.keys(data[0]);
    this.xlsxData = data;
  }

Answer №1

If you're looking to work with xlsx files, I recommend checking out this library. I have personally used it for writing and reading xlsx files, and it performs quite smoothly. (Apologies for not being able to leave this recommendation as a comment)

https://www.npmjs.com/package/xlsx

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

The child user interface component is failing to respond to keypress events within the parent component in an Angular project

I am facing a challenge in adding a keyboard shortcut to open a nested child UI Tab component through a keypress event. However, the Child nested tab can only be loaded after the Parent component is loaded first. Below is the structure of the UI tree: |-- ...

Best type for an array of dictionaries

Is there a way to correctly assign the variable r without utilizing any? const d = [{ result: 'aEzRuMA6AtQ6KAql8W9V' }, { result: 'N6mkKsnFJj98MHtYMxIi' }] const result = d.map((r: HERE) => r.result) console.log(result ) // will pr ...

Issue with FullPageJS: scrollOverflow feature not functioning upon click event

I am currently working on a Fullpage.js instance that needs to be initialized with a click event and then destroyed when switching to another page, and vice versa. The scrollOverflow feature works perfectly as long as the #fullpage element is not hidden up ...

Convert an array of string values into a JSON format

I need help with converting an array stored in my database to a more user-friendly format. Currently, it is saved as follows: ["size:medium","height:10cm"] This format makes it difficult to display in a table. I am wondering if there is a way to conver ...

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

I am looking to extract the value "page = ?" from a specific "href" tag in the HTML code below. I need this value for my Selenium WebDriver script so that my loop can iterate up to page 53. Can someone guide me on how to retrieve the "page =" value mentio ...

Create a file with jQuery and send it to PHP

Hello everyone, I am currently in the process of developing a website that has the ability to generate an MS Excel file using jQuery and allow users to download it. My question is, how can I pass this generated file to PHP so that it can be sent as an atta ...

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

calls to res.send and res.render

I'm currently trying to determine if it's possible to use res.send(data) and res.render('reports') simultaneously in my code. To provide more details, when I navigate to '/reports', on the server side I am executing a REST ca ...

ng2 - Comparing DevExtreme and Telerik Kendo UI

Our team is embarking on a new software project utilizing Angular2, typescript, and HTML5. We are considering two options for UI components: - DevExtreme - Telerik Kendo UI Which of these would be the best choice in your opinion? Thank you! ...

What is the function of this.handleClick that is positioned on the LEFT side of the = operator?

I'm struggling to understand the usage of this in an ES6 constructor. Initially, I grasped the following concepts (see example below): - We utilize this.height = height; to introduce a new instance variable. - Adding a new instance method with cl ...

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

Inject SCSS variables into Typescript in Vue 2 Using Vue-cli 5

When working on my Vue 2 project (created using the Vue-cli v4), I successfully imported variables from my SCSS file into my typescript (.vue files) without any issues. I had the :export { ... } in my SCSS file _variables.scss, along with shims.scss.d.ts ...

Issues arise with the functionality of a basic Vue.js script

I've attempted to execute the following code, which is supposedly the simplest example of Vue.js, but it doesn't seem to be working: <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', d ...

What is the best way to add a new item to an object using its index value?

Can the Locations object have a new property added to it? The property to be added is: 2:{ name: "Japan", lat: 36, lng: 138, description: 'default', color: 'default', url: 'default' } The current Location ...

Real-time updates for UI data in Next.js Firestore are not being reflected

I'm currently working on implementing real-time changes using nextjs and Firebase Firestore. However, I've noticed that I still need to refresh the page in order for the updates to be visible. const [getUsers, setUsers] = useState(""); const che ...

Retrieve the attribute values of an element in Angular after utilizing a template

As a newcomer to Angular, I am exploring the use of custom directives for the first time. Currently, I have a table where each cell contains a data attribute such as "data-dept="service". Before applying a directive to overwrite this value, I would like to ...

Is it possible to use the .map() method on an array with only 3 items and add 2 additional placeholders?

I need to iterate through an array of 5 items in a specific way: list.slice(0, 5).map((i) => { return <div>{i}</div> }); However, if the array only contains 3 items, I would like to add placeholders for the remaining 2 items in my reac ...

What is the best way to access the parent document of a Firestore collectionGroup query?

I'm currently working on accessing the parent documents of all subcollection queries in my database structure. The setup I am aiming for is something like this: /production/id/position/id/positionhistory While I have successfully retrieved all the d ...

Enhancing jquery datatable functionality with data-* attributes

I successfully added an id to each row of my data table using the rowId property, as outlined in the documentation. $('#myTable').DataTable( { ajax: '/api/staff', rowId: 'staffId' } ); Now I am wondering how I can ad ...

"Transform the appearance of the datepicker input field with Material 15's dynamic

I am in need of assistance to change the color to white for the input date and add an underline to a datepicker element <mat-form-field class="date-criteria-select " [floatLabel]="'always'"> <mat-label class=" ...