Angular function for downloading table cells

I'm working with a table containing objects and I need to download each one by clicking on a download button. Download Img

<wb-button
        name="submitButton"
        variant="primary"
        size="s"
        style="width:100%"
        (click)="downloadSdo(sdo)"
        i18n >Download</wb-button
      >

My question is, what should the function in my file.ts look like?

 downloadSdo(sdo: SoftwareDataObject)
  {
    return sdo.id;
  }

Another approach could be placing the download buttons above the table so that users can choose which table to download when clicked. But how can this be implemented? I am new to this and would appreciate guidance.

angulartypescriptangular-material

Answer №1

If you need to convert your object into a string and then download it, you can achieve this by following these steps in JavaScript:

var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(sdo)));
element.setAttribute('download', filename);

element.style.display = 'none';
document.body.appendChild(element);

element.click();

document.body.removeChild(element);

If you only want to download the ID, simply modify the setAttribute() line from stringify(sdo) to stringify(sdo.id)

For more information on creating a downloadable file with JavaScript in the browser without a server, check out this article:

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

Is it possible to utilize a service that is already being used by the imported component?

Recently, I began working with Angular2 and have been quite impressed with it. However, today I encountered a challenge: I have a reusable alert component that utilizes its own service containing business logic. My question is, can I utilize the same serv ...

angularangular2-directives

Converting strict primitive types to primitive types in Typescript

I have a function that parses a string into a value and returns a default value if it fails. The issue is that this code returns too strict types for primitives, such as `false` instead of `boolean`. How can I resolve this? Should I utilize some form of ...

typescripttypescasting

Adding a project to TFS source control using Visual Studio Code: a step-by-step guide

Looking for guidance on adding an Angular 4 project developed with Visual Studio Code (version 1.18.0) to TFS source control. I've already installed the TFS extension (version 0.6.0) in Visual Studio Code, but unsure how to map the project folder to T ...

angulartfsvisual-studio-code

Modify the dynamic style of an Angular input field

Looking for assistance with a text box <input type="text" [ngStyle]="(show_div===true) ? {'border-color':'red','color':'red'} : {'border-color': 'green','color':'g ...

angulartypescript

When attempting to incorporate a third-party library into Angular2 using the CLI, the process did not go as smoothly as anticipated

Trying to integrate a third party JavaScript library sockJS into my Angular2 project... system.config.ts: /** Mapping relative paths to URLs. */ const map: any = { 'sockjs-client': 'vendor/sockjs-client/' }; /** Configuration for use ...

angular

What is the best way to integrate Next.js with Strapi (or the other way around)?

My goal is to develop an application utilizing Next.js for the frontend, fetching data from a Strapi API hosted on the same server. The plan is to have Strapi handle API and admin routes, while Next.js manages all other routes. I intend to use fetch in Nex ...

javascripttypescriptnext.jsstrapi

What is the best way to determine the type of a key within an array of objects

Suppose I have the following code snippet: type PageInfo = { title: string key: string } const PAGES: PageInfo[] = [ { key: 'trip_itinerary', title: "Trip Itinerary", }, { key: 'trip_det ...

typescript

No issues raised by Typescript/tslint regarding this in arrow function

After making some creative adjustments, this is what I came up with: const TopBar = () => ( <Button onPress={this.onPress} // No errors shown /> ) Although all my other rules in tslint.json are functioning properly. Is there a way to ma ...

typescriptreact-nativetslint

Tips for validating the request body prior to sending in Angular unit testing

I'm experiencing some difficulties creating a unit test. Despite reading numerous articles, none have proven to be helpful in simplifying the process. The specific function I need to test returns an Observable. My main objective is to ensure that myB ...

angularunit-testinghttp-postkarma-jasminetestbed

Encountering issues while trying to run npm install for an Angular 7 application, specifically receiving an error stating: "Module not found: @angular-devkit/build-ng-packagr." This error is hindering

I don't have much experience with JavaScript, node, npm, Angular, etc. My expertise lies in TypeScript as I am still a beginner. However, I recently inherited an application that requires maintenance to resolve a cross-site cookie issue. As I attempt ...

node.jsangularjstypescriptnpmnpm-install

The jasmine and protractor combination couldn't locate the specified element using its tagname

Why does my test keep failing in Protractor when trying to find the element by tag name? it('should display the test component', async () => { await browser.get('/trade') element(by.tagName(('test-component'))).isP ...

angularasp.net-mvcjasmineprotractorangular-e2e

I'm encountering an issue where the npm install process is getting stuck while attempting to extract the xxxx package

When running the sudo npm install command on my local machine, everything works fine. However, once I pulled the code into an EC2 Ubuntu machine, the npm install process gets stuck at a certain point. The output shows "sill doParallel extract 1103" and I ...

node.jsubuntuangularamazon-ec2npm

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

javascriptcssreactjstypescriptmaterial-ui

Testing the unit with a customized header in the interceptor

I've been struggling to execute a unit test within an Angular 6 interceptor, but despite numerous attempts, I keep encountering the following error: Error: Expected one matching request for criteria "Match by function: ", found none. I'm rela ...

javascriptangularunit-testingjasmineangular-http-interceptors

Encountering difficulties when attempting to include Spartacus in an Angular application

I'm having trouble integrating Spartacus into my Angular application Here are the steps I followed: Created an Angular application [ng new xyz --style=scss --routing=false] Added a .npmrc file. Ran: ng add @spartacus/[email protected] Now, I&a ...

node.jsangularspartacus-storefront

Typescript enums causing Safari to display blank screen in Next.js

The website performs well on Chrome and Edge, but encounters difficulties on Safari for iOS. Although all the elements, styling, and scripts load properly, nothing appears on the screen. After spending countless hours debugging, I discovered that the pro ...

reactjstypescriptsafarinext.jsyarn-workspaces

Encountering a mysterious server error after configuring CORS settings accurately as directed in the Microsoft documentation

Previously, I was encountering a 405 Method Not Allowed error, but now it seems to have transitioned into a 0 Unknown Error after configuring CORS for both the controller and start.cs. My current focus is on the Error_connection_refused. Why is it being re ...

angularasp.net-coreangular8asp.net-core-3.1

Encountering issues with Next.js routing - Pages failing to load as expected

Having some trouble with the routing in my Next.js application. I've created a page named about.tsx within the "pages" directory, but when trying to access it via its URL (localhost:3000/about), the page fails to load correctly and displays: This Pa ...

node.jsreactjstypescriptnext.js

Uh oh, the executor encountered an issue while trying to run [/bin/sh -c npm run build]. The error code returned was

I'm currently in the process of dockerizing my MEAN stack application. (I recently delved into Docker and began learning about it only 2 days ago). Upon executing docker compose up, I encountered the following error: #22 ERROR: executor failed runnin ...

node.jsangulardockernpm

What is the best way to filter and sort a nested tree Array in javascript?

Looking to filter and sort a nested tree object for a menu If the status for sorting and filtering is true, how do I proceed? const items = [{ name: "a1", id: 1, sort: 1, status: true, children: [{ name: "a2", id: 2, ...

javascriptarraystypescript