Tips for personalizing my XLSX file with TypeScript and Angular?

My JSON data includes:

{
   "cost": 852.14,
   "gross":741.85,
   "net": 213.00,
   "quantity":30,
   "missing": 20,
   "waiting":5
}

Here is the code I am using:

  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.reportPayment,
    {
      header: ['cost', 'gross', 'net', 'quantity','missing', 'waiting']
    });
    const workbook: XLSX.WorkBook = { Sheets: { 'facture': worksheet }, SheetNames: ['facture'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, 'Faktura');


  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }

Now, I am looking to customize my XLSX file and have some questions:

  1. Is it possible to merge cells in both row and column directions? (For example, merging cell A1 with A2)
  2. How can I set the width and height of a cell?
  3. What is the best way to paste each value from the JSON into a specific cell?
  4. Can I apply a background color to a cell?

Answer №1

The focus isn't on typescript or angular, but rather on the SheetJs library (XLSX). Make sure to refer to the SheetJs documentation for more information.

For instance, in order to merge cells, you must populate the worksheet property "!merges" before creating XLSX.WorkBook:

if(!worksheet['!merges']) 
   worksheet['!merges'] = [];
worksheet["!merges"].push({s:{r:0,c:0},e:{r:1,c:0}}); /* A1:A2 */

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

Using JSON input to add color to a d3 bullet chart

I am currently working with a D3 bullet chart example and trying to enhance it by incorporating different colors for the ranges directly into the JSON file. The link to the original example can be found here: . I need this customization because I require d ...

Is there a way to refresh the page in NextJs whenever the parameters are modified without the need for reloading?

Currently, I am navigating on http://localhost:3000/?groupId=chicago&dayOfWeek=tuesday. Despite pressing a button on a component, the desired outcome of transitioning to another day, like Thursday, is not occurring. import { useRouter, usePathname, use ...

Is there a way to ensure that clicking a link_to only opens a partial once?

These are the files I am working with: _comment.haml %div.comment{ :id => "comment-#{comment.id}" } %hr - if current_user && current_user.id == comment.user_id || current_user && current_user.id == reel_user = link_to " ...

Issue: $injector:unpr Unknown Provider (app.js is appearing to be properly defined)

Struggling with the unknown provider issue, I've searched through other threads and tried their solutions to no avail. My goal is to inject 'MockSvc' service into a controller without encountering any errors. Any advice would be greatly appr ...

What could be the reason for my https source being restricted from accessing the navigator Geolocation service?

While trying to retrieve a user's location using the code below: var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(BingMap.map); geoLocationProvider.getCurrentPosition( { showAccuracyCircle: false, timeout: 6000, successCa ...

What measures can be taken to secure an API from unauthorized access by clients?

As I work on building a website using react and nextjs, I find myself creating API endpoints within the API folder. However, I am unsure of how to protect these endpoints from being accessed by clients directly. My goal is to utilize these APIs exclusive ...

Identifying Angular 2 templates post-file separation: a step-by-step guide

I am currently trying to figure out how to initiate a project in Angular 2 and have encountered an issue. Following the steps outlined in this Angular 2 guide, I was able to separate my .ts files from .js files by configuring my 'temp' directory ...

Tips for styling the value of a control in an Angular Reactive Form

What is the best way to format a value in an Angular Form Control? For example, if I have a date field returned from a database with seconds and milliseconds included, how can I format it to show only day, month, year, etc. similar to using the date pipe? ...

The RxJS race function comes to a standstill if neither stream completes

Consider the code snippet below: import { interval, race, Subject } from 'rxjs'; import { mapTo } from 'rxjs/operators'; const a$ = new Subject<number>(); const b$ = interval(1000).pipe(mapTo(1)); race([a$, b$]).subscribe(consol ...

Is there a way to extract variables from a MySQL database and integrate them into a JavaScript function?

Hello everyone, I am looking to add markers on a map. In order to do this, I need to extract longitude and latitude from a database table. 1- I have used JavaScript to display the map (Google Maps). var map; var initialize; initialize = function( ...

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...

Stop the SVG animation in Angular when the loading screen first appears

I would like to incorporate an SVG animation to play while the browser is loading scripts and other assets of Angular 5. Specifically, I intend to use this SVG animation: <?xml version="1.0" standalone="no"?> <!-- Generator: SVG Circus (http://s ...

Retrieving 'this' within the catch clause following the execution of a promise

When using the this keyword within a catch clause after initiating a promise, it displays "this" as undefined. Here is my scenario: I have a service with a Router object injected into its constructor. From a method in the service, an HTTP request is made t ...

Display a new view upon clicking a button using AngularJS in a single-page web application

I am completely new to AngularJS and currently working on my first project. I apologize in advance if my question seems very basic. In my project, I have created a page using simple HTML with three buttons. When these buttons are clicked, I want to load v ...

strophe js is designed to handle the reception of individual messages specifically within the context of Angular

I am currently utilizing Strophe.js for establishing a connection with an XMPP server in an Angular 4 application. When using the connection.addHandler() method, I can successfully receive a single message within my listener function after the connection h ...

Conceal the header and footer during the loading of particular pages

For my Angular 1.x application, I needed a way to hide the header and footer on specific pages. To achieve this, I added a 'navigateOut' data property to my state definitions. Using ng-if in my template, I was able to show/hide elements such as t ...

Error message 'AVV_ERR_PLUGIN_NOT_VALID' encountered within fastify

I've encountered an issue while setting up the environmental variables in my fastify - react app. Can someone help me with resolving the 'AVV_ERR_PLUGIN_NOT_VALID' error that I'm receiving for the following fastify code? Your assistance ...

Modifying iframe elements dynamically across domains

I am faced with the challenge of embedding an iframe form from a web application that I use onto my website. This custom inquiry form is integrated into my diary within the web app, and now I want it to be displayed on my main website while maintaining a c ...

scatter google visualization shows bubbles that overlap one another, all of equal size and color

I am currently working on a google scatter (ScatterChart) plot where I have multiple bubbles that overlap with the same size, color, and position. In a google bubble chart, overlapping bubbles automatically change color to notify the user, but in a scatter ...

Is it possible to use HTML alone in Bootstrap 5 to link a button to display a toast notification?

I'm working on a Bootstrap page that includes a button and a toast element sourced from the Bootstrap documentation. The documentation states that I need to initialize the toast in JavaScript during page load. My goal is to have the toast appear when ...