Retrieve the Excel file in JavaScript by accessing the content-disposition from the Rest API response, which generates [Object, Object]

In my AngularJS code, I need to download an Excel file by making an HTTP POST request to a Java Rest API. The API returns the file with the header "Content-Disposition" : "attachment; filename=\"new_excel_file.xlsx\""

Java Code

@Post 
@Path("/excel/trekResult")
@Produces("application/vnd.ms-excel")
public Response getResultsReport(@HeaderParam(Constants.ID) Long userId, @QueryParam(Constants.COMPANY_TREK_ID) Integer companyTrekId) {
String CONTENT_DESPOSITION = "Content-Disposition";
String CONTENT_ATTACHEMENT = "attachment; filename=\"new_excel_file.xlsx\"";

//Generates an Excel file in the local file system
File excelFile = misHelper.writeToFile(workBook, mis, userId, "trek-results");

return Response.ok().entity((Object)excelFile).
    header(CONTENT_DESPOSITION, CONTENT_ATTACHEMENT).build();

}

On the JavaScript Side

myService.exportResult($scope.companyTrek.id).then(function(result) {
  if(result !== undefined || result !== '') {
    var blob = new Blob([result], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    var objectUrl = URL.createObjectURL(blob);
    saveAs(blob, 'Trek-Results-'+fetchCurrentDate()+ '.xlsx');
  }
}

Used FileSaver.js to save the file.

The resulting file is [Object, Object]

Tested the locally generated file.

For more information on a similar question that didn't solve my issue, please refer to this link:

Receive an Excel file as response in JavaScript from a REST service

Answer №1

Upon closer inspection, I realized that the Mime types vary between the Java server and Angular client.
For more information on the different MIME types associated with spreadsheets, you can check out this helpful link.
I suggest ensuring consistency between the Mime types to see if that resolves the issue.
Additionally, there is an alternative approach explained in detail in this post, which does not involve mishelper.

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

JavaScript will only retrieve the variables from the initial row

Hey everyone, I'm facing an issue with updating a table in real-time using a dropdown on my internal webpage. Unfortunately, my limited knowledge of JavaScript is hindering me from resolving it. The script that I came up with only captures the values ...

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

As someone transitioning from a jQuery background to learning AngularJS, I am facing challenges with what should be simple tasks. The particular issue I am struggling with involves dynamically adding HTML and binding it to a controller in a way that suits ...

Custom directives are unable to interact with inbuilt directives

var app = angular.module("myDiscuss", []); app.controller("TabController", function() { this.tab = 0; this.subTab = 0; this.like = 0; this.selectLike = function(setTab) { this.like= setTab; }; this.selectTab = function(setTab) { this. ...

Analyzing JSON data in client-side JavaScript that has been transmitted from a Node.js server

Trying to check out some JSON in the chrome console that was sent from a NodeJS file. No errors are showing up, but for some reason, I can't see the message "hello world" The NodeJS file sends the JSON message after an HTML form is filled o ...

Activate Pop-up for a single instance on BigCommerce

After researching and adding my own code, I am still struggling to get this question answered correctly. Here are the key points I am trying to achieve: 1. Automatically open a popup when the homepage loads. 2. Ensure that the popup is centered on all brow ...

The HTML file's script tag does not function properly

I am facing an issue with using the script tag in my HTML files. For example, I am trying to create a photo gallery using HTML, CSS, and JS but the script part of my code doesn't seem to work. Here is the code snippet, can anyone spot any syntax or l ...

Implementing a Typescript directive in AngularJS to create a class

After using AngularJS for quite some time, I decided to explore Typescript. I managed to convert most of my Angular code to Typescript and found it beneficial, especially when working with services. However, I am struggling to convert the following direc ...

Vue.js displaying the error message: "The maximum size of the call stack has been exceeded"

Could you assist me in resolving this issue? router.js routes: [{ path: "", component: () => import("@/layouts/full-page/FullPage.vue"), children: [{ path: "/pages/login", name: "page-login", component: () => import("@/views/pages ...

Verify whether a specific value is present within a nested array in MongoDB

Looking to verify whether a value sent in a request already exists within an array associated with a particular User. The data structure is as follows: { "_id": "63233972df0f14076e027106", "firstName": "mako" ...

Adding individual flag icons for each country in your Datatables can be a significant enhancement to

Below is the code snippet in JavaScript with flags: <script type="text/javascript"> $(document).ready(function() { var dataTable = $("#example").DataTable( { processing: true, bSort: false, ...

What is the process for removing a row from the database in this scenario?

My current goal is to implement a functionality where clicking on the "Delete" button will remove a file from the server and also delete the corresponding database entry with the same file name. The file deletion process on the server works perfectly, but ...

Creating a Modal in React without the need for a button to trigger it

I am working on implementing a model using the React Material UI library to display information on the landing page when a user logs in. However, I am facing an issue with closing the modal once it appears despite using a timeout trigger. const[post,setP ...

Change a JavaScript object into an array with different options while still maintaining the keys

I am attempting to transform the following JavaScript object: image_uploads: [ 0: { upload_id: 50, }, 1: { upload_id: 51, }, 2: { upload_id: 52, }, ] Into separate entries using this structure for inclusion in the body of a POST r ...

Guide on preventing radiobutton postback in ASP.NET based on specific conditions on the client side

I have a radio button list set up in my form. Upon selecting an option, a postback occurs followed by the execution of some business logic. However, I am facing an issue where I need to prompt the user for confirmation when they select a radio button optio ...

What is the process for including a checkbox at the beginning of each row in a React-virtualized table?

I have been utilizing the react-virtualized library to render a Table, with an intended appearance as follows: Desired Table Layout My progress so far has led me to this representation: Current Table Display https://i.sstatic.net/6VFbp.png I have succ ...

Warning: [ng:areq] The function called in the MainController is not defined and resulted in an error. Visit http://errors.angularjs.org/1.3.15/ng/areq?p0=MainController&p1=not%20a%20function%

When creating unit tests for my controller, I encountered the following error: Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MainContr oller&p1=not%20a%20function%2C%20got%20undefined I'm unable to find the cause of this iss ...

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear. <mat-drawer-container class="example-container" ...

Understanding Three.js Fundamentals: Resolving GLTFLoader Animation and Variable Not Found Issues

My understanding of JS is very basic. After exploring the three.js docs on Loading 3D models, I managed to successfully render a 3D object and center it: const loader = new GLTFLoader(); loader.load( 'Duck.gltf', function ( duck ) { con ...

What is the process for retrieving the user's information following successful social media login?

I have implemented Firebase for authentication in plain JavaScript, without using any frameworks like AngularJS or Angular2. When a user signs up successfully with Google or Facebook, I want to display their name, email, and profile picture. firebase.auth ...

Is there a way to control a single Angular application using multiple JavaScript scripts?

Summary: I am looking for a way to allow two script files to handle different tasks within the same angular app. One needs to initialize the app, while the other needs to assign a templateCache object to a section of JSON stored in localStorage. Backgrou ...