Firefox compatibility issue with Angular JS for downloading excel files

I've encountered an issue with my AngularJS code for downloading an Excel file. While it works smoothly in Chrome and Internet Explorer, it fails to function in Firefox. The server response isn't presenting any problems. Here's the code snippet: 

var did = "someid";
var url = '/downloadAsExcel';
$http({method: 'POST', url: url, data:did,headers: {'Content-type': 'application/json'},responseType: 'arraybuffer'})
.success(function(data, status, headers, config) {
  var blob = new Blob([data],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  var fileName = headers('Content-Disposition').split(";")[1];
  fileName = fileName.trim().split("=")[1];
  var downloadName = (fileName != 'undefined') ? fileName : "DefaultName";
  link.download = downloadName;
  link.click();
})
.error(function(data, status) {
    console.log("Something went wrong "+status);
});

Any assistance would be greatly appreciated.

Thanks, JK

javascriptangularjsfirefoxapache-poi

Answer №1

This code snippet illustrates the solution achieved with assistance from Axel.

var id = "someid";
var endpoint = '/downloadAsExcel';
$http({method: 'POST', url: endpoint, data:id,headers: {'Content-type': 'application/json'},responseType: 'arraybuffer'})
.success(function(data, status, headers, config) {
 var excelBlob = new Blob([data],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
 var linkElement = document.createElement('a');
 linkElement.href = window.URL.createObjectURL(excelBlob);
 var fileHeader = headers('Content-Disposition').split(";")[1];
 fileHeader = fileHeader.trim().split("=")[1];
 var filename = (fileHeader != 'undefined') ? fileHeader : "DefaultName";
 linkElement.download = filename;
 if(document.body != null){ document.body.appendChild(linkElement); }
 linkElement.click();
})
.error(function(data, status) {
console.log("An error occurred: "+status);
});

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

Leveraging React Hooks for managing the Data Provider and Data Context functionality

Currently, I am revamping my DataProvider by upgrading it from a class component to a functional component utilizing React Hooks. I suspect that the issue lies in how I am setting up my context consumer, but I am struggling to find an effective way to tes ...

javascriptreactjs

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

I have a webpage that includes an image and a button. When the button is clicked, it uploads the image by submitting a form to a file upload servlet. However, after successfully uploading the image, the servlet does not display it in the img tag. Here is ...

javascriptjavajqueryhtmlservlets

How can I integrate NIB into a project created with WebStorm 8 using node.js, Express, Jade, and Stylus?

Starting off with node.js, Express, Jade, Styl and NIB in WebStorm 8 has been a bit of a challenge. Unfortunately, WebStorm does not natively support NIB, so I have been looking into how to manually add it. Here is the sample app.js generated by WebStorm: ...

javascriptnode.jsexpresswebstormstylus

The sequence of execution in React hooks with Typescript

I'm having difficulty implementing a language switching feature. On the home page of my app located at /, it should retrieve a previously set preference from localStorage called 'preferredLanguage'. If no preference is found, it should defau ...

javascriptreactjstypescriptreact-hooks

Scanning HTML data and displaying it on a web page

Within my controller: $scope.currencySymbol = $sce.trustAsHtml('₹'); On the HTML page: {{currencySymbol}} Currently displaying ₹ on the page, but I am aiming for it to display the ₹ symbol instead. ...

angularjs

An error has occurred in nodejs: headers cannot be set after they have already been sent

I'm a newcomer to Node.js and encountering some challenges. Whenever I attempt to open 127.0.0.1:3000/bejelentkezes, I encounter the following error: POST /bejelentkezes 500 550.784 ms - 2259 GET /css/404.css 304 2.751 ms - - 1 Successful login Erro ...

javascriptnode.jsexpress

Display Content in a DIV When Form Field is Unfocused

After hours of searching, I still haven't found a solution! I am trying to create a form field (text) where users can type in text. I want the text they enter to appear in a div on the screen either as they type or after they finish typing. Maybe thi ...

javascriptjqueryhtml

Sorting a function with two parameters in descending order is possible even when dealing with an empty array and no initial value for reduction

My npm test is not passing the third out of six tests. I have attempted to sort it using the following code snippet: sumAll.sort(function(min,max)) { return max - min; } However, this approach did not work. I also tried incorporating conditionals in t ...

javascriptnpmjestjs

Preventing jQuery from loading a div if it already exists: a step-by-step guide

I've encountered an issue with a mock console on my website - every time the same input value is submitted more than once, jQuery reloads the div due to its specific id. Instead of cloning the div, I decided to append a message indicating that it alr ...

javascriptjqueryajax

Extract reference value from an HTML element

Is there a way to access the ref prop from an HTML element using Testing Library React? My current code snippet is as follows: it('element container ref should be null if prop noSwipe is passed', () => { const onCloseMock = jest.fn() ...

javascriptreactjsjestjstesting-library

Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked. Can someone please provide guidance on achieving this? --code not mine-- ...

javascripthtmljquerycss

What is the best way to create a tree structure that can hold data from multiple sources?

I have a variety of Models within my application: ModelA: fields: [id, name], hasMany: ModelB ModelB: fields: [id, name, attr], hasMany: ModelC ModelC: fields: [id, name, attr] To efficiently manage this nested data, I utilize a data store in conjuncti ...

javascriptextjs

Ways to interpret and contrast the information within files (verifying if the lengths of the strings are identical)

I have a web tool where users can upload text and code files, which are then saved in a local directory. I'm trying to create a function that reads these files, compares their lengths, and generates a report indicating whether they are equal or not. B ...

javascriptnode.jsexpressnpm

``Please note that the Sinon spy.called method is currently not

Context In my setup, a small server receives data from a machine. Each time a message is received, a function in a dispatcher object is called, which simply logs everything it receives to the console. Issue While I can see the logs in the console, Sinon ...

javascriptnode.jstestingsinon

What is the best way to extract the value from a Material UI Slider for utilization?

I am looking to capture the value of the slider's onDragStop event and store it as a const so that I can use it in various parts of my code. However, I am unsure about how to properly declare my const sliderValue and update it. Any guidance on where a ...

javascriptreactjsslidermaterial-uireact-props

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

Is there a method to eliminate the necessity of including the server IP address in the nginx configuration file?

I integrated nginx as a reverse proxy into a basic express app. In the configuration file, I specified the server IP address () as the server_name. However, I am looking for a way to avoid directly inputting the actual server IP in the config file without ...

javascriptnode.jsexpressnginx

Experiencing a 403 Error while using request-promise to extract price data from a website

My current challenge involves using request-promise to scrape the price of an item from Asos.com. Whenever I try to execute the code provided below, I encounter a 403 error. Could it be possible for this error to occur even though the URL I am attempting t ...

javascriptnode.jshttprequest-promise

Is there a particular motive behind the decision for `arguments` to be treated as an object

Today while coding, I came across something puzzling. arguments.concat(someNumber); This line gave me an error for undefined function. Initially, I assumed that arguments was a native object for optimization purposes, but later discovered it's simp ...

javascript

jQuery unable to find designated elements in uploaded templates

I have a specific route linked to a specific controller and view: app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/create', { templateUrl: 'partials/form/form.html', controlle ...

javascriptjqueryangularjs