Downloading xml data in an Angular table is a straightforward process that can be achieved

I have a table displaying a list of data. Each row includes an option to download XML data.

       0{
        firstName: null
        id: "04674"
        lastName: null
        orderId: "TEM001"
        productId: "TEM"
        receiptPeriod: "2016-02-26"
        requestData: "<edem:eD..........d>"
        }
      1{
        firstName: null
        id: "044a18b1022f674"
         lastName: null
         orderId: "TEM001"
        productId: "SURE"
        receiptPeriod: "2016-02-26"
        requestData: "<edem:eD..........d>"
        }

When the download button is clicked, it should download Obj.requestdata from the corresponding row. How can this be accomplished?

      <td class="align-center">
         <span class="glyphicon glyphicon-download-alt btn-blue" ng-click='something' ></span>
      </td>
javascriptangularjsxmlangularjs-scopengtable

Answer №1

If your audience is using modern browsers, you have the option to utilize the Blob object in the following manner:

const app = angular.module('App', []);

app.controller('AppCtrl', [ "$scope", function($scope) {
    $scope.docs = [
      { title: "Titi", xml: "<a><b>Titi</b><c>1</c></a>"},
      { title: "Tata", xml: "<a><b>Tata</b><c>2</c></a>"},
      { title: "Toto", xml: "<a><b>Toto</b><c>3</c></a>"}
    ];
  
    // Method 1
    $scope.exportAsPopup = function(doc) {
      // blob text should be in an array
      const fileToExport = new Blob([doc.xml], {type: "text/xml", name:"export_"+doc.title+".xml"});
      // This code should work, but certain browser policies may restrict it
      window.open(URL.createObjectURL(fileToExport));
    }
    
    // Method 2
    $scope.exportAsLink = function(doc) {
      // blob text should be in an array
      const fileToExport = new Blob([doc.xml], {type: "text/xml"});
      
      const a = document.createElement("a");
          a.href = URL.createObjectURL(fileToExport);
          a.target = "_blank";
          a.download = "export_"+doc.title+".xml";
          a.click();
    }
    
  }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="App" ng-controller="AppCtrl">
  <tr ng-repeat="doc in docs">
    <td>
      {{doc.title}} 
      <span class="export" ng-click="exportAsPopup(doc)">export via popup</span> | 
      <span class="export" ng-click="exportAsLink(doc)">export via link</span></td>
  </tr>
</table>

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

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

The issue of the marker vanishing upon refreshing the page on AngularJS

Currently, I am encountering a rather peculiar issue. Upon the initial page load, the code snippet below correctly displays a marker at the specified coordinates and ensures the map is properly centered: <div class="paddingtop"> <map data-ng- ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

I recently started working on a frontend project using Next.js v13.4 app router, with an additional backend. I have organized my routes and related functionalities in the api folder within the app directory. However, when I attempt to use the fetch() funct ...

javascriptreactjsnext.jsfetch-apiapp-router

"Eliminate any inline styling from a string element with the power of JavaScript/j

If I have the following string: let sentence = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>'; This string contains multiple elements a ...

javascriptjqueryhtmlregex

Issue with code failing to insert object into an array

I've been struggling to add a group of objects from a JSON file into an array. Despite trying to use the push method, the length of the array remains at 0. I'm puzzled by what could be going wrong. The JSON data is being parsed correctly as I&apo ...

javascriptarraysjsonpush

Traverse an SVG element using JavaScript

I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opp ...

javascriptcsssvg

What is the significance of the A tag when parsing a URL?

So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...

javascripthtmldom

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

Dividing a string using regex to deal with numerical issues

My task involves processing a list of strings that look like this: Client Potential XSS2Medium Client HTML5 Insecure Storage41Medium Client Potential DOM Open Redirect12Low The goal is to split each string into three parts, like so: ["Client Potential X ...

javascriptnode.jsregex

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...

javascriptcssanimationzoomingpan

Ways to verify if all files have been loaded using Firebase.util pagination

Is there a way to confirm if it is necessary to stop invoking the loadMore() function, since all documents have been retrieved from the database? In the code snippet provided, Ionic framework is used as an example, but the same concept applies to ng-infin ...

javascriptangularjsionic-frameworkfirebasefirebase-util

The attribute 'split' is not found on the never data type

I have a function that can update a variable called `result`. If `result` is not a string, the function will stop. However, if it is a string, I then apply the `split()` method to the `result` string. This function always runs successfully without crashin ...

javascripttypescript

Increase the identifier of my input text when a table row is duplicated through Javascript

I have a table with only one row that contains various elements like textboxes and buttons. I want to clone the table row using the append() function when a button is clicked. However, I am facing an issue - how can I increment the id of the textboxes and ...

javascripthtml

Utilizing Angular's ng-repeat directive to dynamically generate images, with the added functionality of attempting to

I am utilizing angular-drupal to fetch data from my backend built on Drupal. My objective is to create an image gallery using the default endpoints provided by the services module. I make a call to node load to retrieve a specific node, then I extract the ...

javascriptangularjsdrupal

The iFrame that is generated dynamically becomes null when accessed from a page that has been loaded using JQuery

One issue I am facing is with a dynamically created iframe in regular javascript. It functions perfectly fine when called from a static page using conventional methods. However, when it is being called from a page loaded by jQuery, I encounter an error s ...

javascriptjqueryhtml

Is my Discord.js bot malfunctioning due to incorrect indentation, despite the absence of errors?

After spending a considerable amount of time developing this bot, I encountered an issue following an update that introduced 'limitedquests'. Previously, the bot worked flawlessly but now, certain functions are not functioning as intended without ...

javascriptnode.jsdiscorddiscord.js

Tips for setting a unique JWT secret in next-auth for production to prevent potential issues

Is there a way to properly set a JWT secret in NextAuth.js v4 to prevent errors in production? I have followed the guidelines outlined in the documentation, but I am still encountering this warning message without any further explanation: [next-auth][warn] ...

javascriptnext.jsjwtnext-auth

JavaScriptCore now includes the loading of AMD modules

I am trying to incorporate a JavaScript module into JavascriptCore on iOS. To achieve this, I am fetching the file's text through a standard HTTP request on the iOS platform. Once I have obtained the entire string, I plan to parse it into the JSconte ...

javascriptrequirejsrequireamdjavascriptcore

The feature of determining if an edge exists, within the dagre-d3/graphlib,

Has anyone utilized the graph.hasEdge function in dagre-d3/graphlib to check for the existence of an edge between two nodes? This API takes two arguments representing the two nodes and verifies if there is an edge connecting them. I am facing an issue whe ...

javascriptd3.jsdagre-d3

Tips for uploading a file using Axios in a form

When uploading a file to a Flask server, I can access files from the flask request global by using raw HTML with the following code: <form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data> < ...

javascriptajaxfile-uploadaxios