Exporting Excel files in an Angular 2 application using TypeScript

I am currently working on an angular2 application and need help exporting data to an xlsx file. I have been trying to get a couple of libraries to load, such as the ones mentioned in this jsfiddle and on stackoverflow. My attempts with alasql have resulted in errors, with messages stating it's not a module. Following advice from blogs like this one lead to errors such as "cannot read property 'compile' of undefined."

The jsfiddle provided shows the functionality I would like to achieve:

var res = alasql('SELECT INTO XLSX("MyAwesomeData.xlsx",?) FROM ?',[opts,[data1,data2]]);

If anyone has suggestions for other tools or approaches that would work in angular2, I am open to exploring them. However, the above solution using alasql would be ideal if I can successfully integrate it into my project.

javascripttypescriptangularxlsx

Answer №1

To export JSON to an Excel file in Angular 2, you can utilize the alasql npm module.

  1. First, install the necessary npm modules: 

    i)  npm install --save alasql 
ii) npm install --save xlsx

  2. In your angular-cli.json file, add the following node module scripts under scripts:

    "scripts": [
"../node_modules/xlsx/dist/xlsx.core.min.js",
"../node_modules/xlsx/dist/xlsx.min.js",
"../node_modules/alasql/dist/alasql.min.js"

    ]

  3. Add the import statement below in the component where you want to export the file: 

    import * as alasql from 'alasql';

  4. Next, in the button click function, include the following code:- 

    buttonClick(){
var data1 = [{a:1,b:10},{a:2,b:20}];
var mystyle = {
  headers:true, 
  column: {style:{Font:{Bold:"1"}}},
  rows: {1:{style:{Font:{Color:"#FF0077"}}}},
  cells: {1:{1:{
    style: {Font:{Color:"#00FFFF"}}
  }}}
};
 alasql('SELECT * INTO XLSXML("tdts.xls",?) FROM ?',[mystyle,data1]);

    }

Answer №2

Recently, I encountered a similar issue. While alasql is not an angular 2 module, it can still be used with angular 2 by including it in the old way.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

Then add this line after the imports in the component or service file where you need to utilize alasql.

declare let alasql

This method worked perfectly for me. Here is the link for more information.

Best of luck!

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

Tips for utilizing anchor links in Angular without altering the URL within the Angular framework

I am attempting to navigate from a element with the class "class1" to a div with the class "class2". However, when the link is clicked, the URL changes. This causes an issue where trying to go back results in returning to the current page at a different ...

htmlcssangularscrollangular-routerlink

Enhancing the type safety of TypeScript Generics

Uncertainty looms over me - am I committing an error, or is this all part of the plan... Within my academic domain class Collection<E> { ... } Lies a function public Insert(item: E): void { ... } I construct a specific instance of my list const ...

typescriptgenericstype-safety

What is the best way to format the content with Tailwind CSS?

I have been trying to customize the appearance of my header item container, which includes a home icon. The issue I'm facing is that despite styling the icon and other elements within the container using Tailwind CSS classes, the changes are not refle ...

javascripthtmlcssnext.jstailwind-css

Using Angular's ng-repeat to handle duplicate elements

My chosen front-end framework is Angular, and below is an example of how I structure my view: <div class="col-sm-6" ng-repeat="contact in service.contacts"> <label class="control-label mb10">{{contact.textDescription | decodeURICompone ...

javascriptangularjsangularjs-ng-repeat

Choosing elements from an array in real-time

Having a javascript array with JSON objects as values, such as: var array = [{"div0" : [2, 1, 3, 5]}, {"div1" : [1,5,7,8]}, {"div2" : [6,9,11]}]; I am able to manually select each object like array[0].div0, array[1].div1, array[2].div2. However, I' ...

javascriptjqueryarraysobjectforeach

Restructure an array of objects into a nested object structure

I have a list of task items that I need to organize into a structured object based on the ownerID var tasks = [ {taskID: "1", title: "task1", ownerID: "100", ownerName: "John", allocation: 80}, {taskID: "2", title: "task2", ownerID: "110", ownerNam ...

javascriptarraysjsonobject

Display the status in the textbox once a dropdown value has been selected

I have a function that allows me to add shops. Within this function, I am able to select whether the shop is OPEN or CLOSED. The goal is for the status of the shop, either OPEN or CLOSED, to appear in a textbox on another modal. When creating a user and ...

javascripthtmlcodeigniter

Refreshing a page in Angular 2 using webpack may sometimes lead to the index.html file loading without any styling or

I'm having trouble with my Angular 2 project. Every time I refresh the page or the HRM does, it redirects to index.html (or '/') without injecting the html code and webpack head-config.common.js properly. Additionally, I noticed that the web ...

angularwebpack

What is the most efficient way to transform various colors using graphicsmagick and typescript?

Seeking a way to convert colors in a png image using GraphicsMagick, my current hardcoded code is: await gm("input.png") .fill("green") .opaque("blue") .fill("red") .opaque("yellow") .write("output.png", function (err) { if (err) ...

typescriptgraphicsmagick

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

Solving the Angular 7 HttpHeaders Cross-Origin Resource Sharing Problem

I'm currently working on integrating UPS's package rating API into my project. I've managed to make it work in Postman, but I'm facing issues when trying to run it on a web browser due to Cross-Origin Resource Sharing (CORS) restriction ...

javascriptangularcorsangular7

Collapsible feature in Bootstrap malfunctioning after initial use

I am currently developing a website using PERSONA as the CMS and have implemented collapsible elements on the page using Bootstrap. The website is using Bootstrap Version 3.3.7 and PERSONA includes an internal version of jQuery. For reference, you can acce ...

javascriptjqueryhtmlcssbootstrap-4

Click on the div in Ionic 2 to send a variable

<div class="copkutusu" (click)="kanalsil(kanalid,deneme)" #kanalid id={{ver.channelid}} #deneme id={{ver.channelapikey}}></div> I am requesting kanalid.id and deneme.id in my .ts file. Even though they are the same variable names, they repres ...

angulartypescriptionic2

Rearrange the position of the customized google map marker to appear just above the latitude

Can you provide guidance on how to move a customized Google Map marker above a specific latitude and longitude point? You can view the code structure in this JSBIN: Link. I have used three object arrays for reference. Where should I insert the "anchor" i ...

javascriptgoogle-maps

Tips for managing the 'undefined' error in JavaScript when dealing with constantly changing deeply nested objects

Currently, I am developing a project using React with Formik for form handling and Yup for validation schemas. My current task involves validating a nested form to add a CSS class to the input if there is an error in the respective index of the nested fiel ...

javascriptreactjsecmascript-6

Using Vue.js to dynamically add classes based on an array

Just diving into Vue and experimenting with displaying a grid of cards. I've managed to group them into rows of three, but now I want each row to have a distinct class assigned from an array of classes. However, I'm a bit stuck on how to achieve ...

javascriptarraysvue.js

Textures have been added by the user in the three.js platform

Click here to access the jsFiddle adaptation of this problem. In my quest to develop a cutting-edge 3D web application, I aim to allow users to choose an image file from their device: <input id="userImage" type="file"/> Once a file is selected, th ...

javascriptopengl-esthree.jswebglcors

The element 'commit' cannot be found within the property

I am facing an issue when transitioning from using Vuex in JavaScript to TypeScript. The error message Property 'commit' does not exist appears in Vuex's mutations: const mutations = { methodA (): none { this.commit('methodB' ...

typescriptvue.jsvuex

ReactJS Typescript Material UI Modular Dialog Component

Hello, I need help with creating a Reusable Material UI Modal Dialog component. It's supposed to show up whenever I click the button on any component, but for some reason, it's not displaying. Here's the code snippet: *********************TH ...

reactjstypescriptmaterial-ui

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

I am facing an issue while trying to insert an icon into a select option. The error message I received is: Warning: validateDOMNesting(...): cannot appear as a child of <option> To indicate that certain fields are required, I am using asterisk ic ...

javascripthtmlcssreactjsfont-awesome