If you are getting an output of [Object, Object] when trying to download an Excel file in JavaScript from a REST API response with Content-Disposition, it means that the data received from the API is not directly in the expected format for a file download. Instead, it seems to be an array containing two objects.

To properly handle the file download, you need to access the actual file data from the response and trigger the download using JavaScript. Here's a general outline of how you can achieve this:

  1. Make the API Request: Use an appropriate method (e.g., fetch or XMLHttpRequest) to make the API request and receive the response.

  2. Parse the Response: Parse the response to extract the actual file data, which might be available in the response body or a specific property.

  3. Create and Trigger File Download: Once you have the file data, create a Blob or a data URL using the data. Then, use it to create a downloadable link or trigger the file download programmatically.

Below is an example using the fetch API to download an Excel file:

fetch('your_api_endpoint', { method: 'GET', headers: { // Add any necessary headers, such as authorization headers, if required by your API }, }) .then(response => response.blob()) // Convert response to a Blob .then(blob => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; // Extract the filename from the response headers const contentDispositionHeader = response.headers.get('Content-Disposition'); const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; const matches = filenameRegex.exec(contentDispositionHeader); const filename = matches && matches[1] ? matches[1].replace(/['"]/g, '') : 'file.xlsx'; // Set the filename for download a.download = filename; document.body.appendChild(a); a.click(); a.remove(); // Clean up the temporary element }) .catch(error => { console.error('Error:', error); });

In this example, the fetch API is used to make a GET request to the API endpoint. The response is then converted to a Blob using the .blob() method. The filename for download is extracted from the Content-Disposition response header. Finally, a temporary anchor element (<a>) is created to trigger the file download, and then removed to clean up.

Keep in mind that the exact implementation may vary depending on the specific response format and the API you are working with. Make sure to handle error cases and edge cases appropriately in your actual implementation.

Have questions or queries?
Get in Touch