Utilizing Ionic to import and parse an Excel file for data processing

I need assistance in uploading an Excel file and reading it using Ionic-Angular. I tried the following code, but it only seems to work for browsers and not for the Ionic app on Android. Can someone please help me with this issue?

I am trying to read the Excel file and extract a value from it, but so far, it's not working on the Ionic app (Android). If there is any plugin or solution available for reading Excel files, I would greatly appreciate any help.

Here is the code snippet:

<ion-input #inputFile id="input-file" type="file" (change)="excelRead($event)" multiple></ion-input>


 public excelRead(e :any  ){
    let fileReaded :any ;
    fileReaded = e.target.files[0];
    let type = e.target.files[0].name.split('.').pop();
   console.log(fileReaded.name)
    const schema = {
      'Material' :{
        prop : 'material',
        type : String ,
        required : false 

      } ,
      'Description' :{
        prop : 'description',
        type : String ,
        required : false 

      } ,
      'Emplacement' :{
        prop : 'emplacement',
        type : String ,
        required : false 

      } ,
      'Physique' :{
        prop : 'physique',
        type : Number ,
        required : false 

      } ,
      'Sap' :{
        prop : 'sap',
        type : Number ,
        required : false 

      } ,
      'Ecart' :{
        prop : 'ecart',
        type : Number ,
        required : false 

      } ,
      'Cagette' :{
        prop : 'cagette',
        type : String ,
        required : false 

      } ,

    };

  
    readXlsxFile(fileReaded, {schema}).then((data) =>{

      console.log("message1")
        if( data.rows){

          for (let i of data.rows){
            console.log("message2")
            this.inventaireTab.push(i);

          }                
        }
        console.log("message3")
        console.log(this.inventaireTab)

      for (let i = 0; i < this.inventaireTab.length; i++) {
      
   
      this.quantite.push(this.inventaireTab[i].physique) 
       
        
      }
      console.log(this.quantite)

    }
    
    
    
    )

  }

If you have any suggestions or solutions, please feel free to share them. Your help is greatly appreciated.

Answer №1

To access various file formats, make sure to utilize the Ionic File Opener Plugin. You can find more information on how to use it here: https://ionicframework.com/docs/native/file-opener

If you are looking for guidance on opening files such as doc, ppt, xlsx, pdf, jpg, and png using the plugin, check out this helpful reference: how to open (doc, ppt, xlsx, pdf, jpg ,png) file using ionic native file opener

With this plugin, you will be able to easily open a variety of different file types.

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 Angular application is receiving a 404 error when trying to access the .NET Core

Having trouble calling a method in the controller via URL, as I keep encountering a 404 error. What could be the issue? API Endpoint: http://localhost:5000/Home/HomeTest /*.net core web-api*/ namespace MyApp.Controllers { Route("api/[controller]") ...

Facing issues with Angular 13 migration: Schema validation encountered errors stating that the data path "/error" needs to be a string

Currently in the process of migrating from Angular 8 to 13 and encountering an issue. I have been following the guidelines outlined on https://update.angular.io/, however, every time I attempt to build certain custom libraries from my application root fold ...

What is causing my JS/JQuery code to only function in the console of a web browser?

I am having trouble with the $(element).scroll(function(){}); function. When I put it into a js file, it does not work properly, but when I enter it directly into the console (just the scroll func), it works fine. My goal is to implement scrolling paginat ...

Issue TS2315: Type 'ElementRef' does not support generics

While attempting to integrate @angular/materials into my application, I encountered a successful compilation with the following error messages: webpack: Compiled successfully. ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.t ...

Having trouble getting a local npm installation to work from a specific file path?

After following the instructions from this helpful link to install an npm package through a file path, I encountered an error when attempting to use it: Cannot find module '<module_name>' or its corresponding type declaration Are there an ...

Adjust the path-clip to properly fill the SVG

Is there a way to adjust the clip-path registration so that the line fills correctly along its path instead of top to bottom? Refer to the screenshots for an example. You can view the entire SVG and see how the animation works on codepen, where it is contr ...

The pipe seems to have malfunctioned

Here is how my pipe file appears: pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'unique', pure: false }) export class UniquePipe implements PipeTransform { transform(value: any, args?: any): any { ...

Issue: A request is not pending for flushing during the testing of an AngularJs service

As a beginner in AngularJs, I am currently working on my first unit test. In order to test the service I created, I wrote a test that simply returns a single Json object. However, whenever I run the test, I encounter the error mentioned in the title. I am ...

You cannot assign multiple properties with the same name to an object literal

I am facing an issue with two validator functions in my TypeScript file. The first validator checks if a user enters a new password same as the old one, displaying an error if so. The second validator ensures that "new password" and "confirm password" must ...

What is the functionality of this JavaScript code after the "if" statement?

I am having trouble understanding how this code works, especially after the if(y in hash) statement. I don't see any values being pushed into hash initially. Can someone explain what happens behind the scenes and the significance of y in hash? var ...

What is the method for determining the height of a div element when it is set to 'height=auto'?

I am trying to determine the height of a specific div using Javascript. Here is the script I have written: function getMainDivHeight() { var num = document.getElementById('up_container').style.height; return num; } However, this script ...

What are the steps to setting up a basic Material UI Select component with React and Typescript?

I'm struggling to make the most basic Material UI Select work in React using Typescript. After spending three hours searching, I couldn't find an example that clearly explains how to set the label or placeholder for the Select component (I review ...

Here's a unique version: "Steps for replacing an outdated chart with a new one using Chart.js and

Is there a way to remove an old chart when the user clicks a button to retrieve a new chart? I understand that the existing chart needs to be destroyed before a new one is generated, but currently, the code does not support destroying non-globally create ...

"Turn a blind eye to Restangular's setRequestInterceptor just this

When setting up my application, I utilize Restangular.setRequestInterceptor() to trigger a function that displays a loading screen whenever a request is made with Restangular. Yet, there is a specific section in my application where I do not want this fun ...

Learn how to create a half and half color scheme in an HTML table

I have created an HTML table that resembles a calendar. Various events are registered in the calendar, each distinguished by its color. However, I am looking to change the colors of the cells to be half and half. https://i.sstatic.net/gaQq2.png The imag ...

What is the best way to remove an exported JavaScript file from Node.js?

In my Node.js library package called "OasisLib," there is a file named TypeGenerator.ts. The specific logic within the file is not crucial, but it requires access to files in the filesystem during the project build process. To achieve this, we utilized let ...

Hiding javascript code within comment tags "<!-- //-->"

Years ago, I started a practice of enclosing all my JavaScript code in files with <!-- Code goes here //--> I'm not entirely sure why I did this. Maybe it was to hide the code from old browsers, is that right? Do I still need to do this? I ...

Why does the private map function in the class fail while the global function succeeds?

Issues arise when calling the map() function on a parsed JSON object within the mapStocks() function. Placing the toStock() function inside the StockService class results in failure, whereas declaring it as a "global" function outside the class works witho ...

Tips for transferring information from Angular 6 to Node.js

Having recently delved into Angular 6 for the first time, I find myself tasked with sending data to a Node.js server. The code snippet below illustrates my approach within an Angular function: import { Component, OnInit } from '@angular/core'; ...

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Can someone help me with this error I'm encountering? I am fairly new to typescript, so I assume it has something to do with that. Below is the code snippet in question: Any guidance would be greatly appreciated. const Pizzas: React.FC = () => { ...