"Encountered a corrupt XLSX file when attempting to download through Vue.js with Axios

Hey there, I've been attempting to generate a download using axios for an excel file but unfortunately, I haven't been successful in opening it. Could you please assist me in identifying the problem?

    const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });

                            const url = URL.createObjectURL(blob)
                            const link = document.createElement('a')
                            link.href = url
                            link.setAttribute('download', 'atetes.xlsx')
                            document.body.appendChild(link)
                            link.click()

I've experimented with several solutions, but I keep receiving a corrupted file.

javascriptc#excelvue.jsaxios

Answer №1

I encountered a similar issue and dedicated a significant amount of time to resolve it. The problem stemmed from the response object containing invalid data, causing frontend parsing to be incorrect. The solution in my case was straightforward. When making an API call, I included responseType as an array buffer to ensure proper functionality:

return await client({ method: "get", url: `[YOUR API ENDPOINT]`,
      responseType: "arraybuffer",
      headers: {
        "Authorization": token,
        "Accept": "application/octet-stream",
      }});

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

Ways to choose a Gmail account for logging into Firebase on mobile applications using Vue for a cross-platform application

Currently, I am developing a cross-platform app for iOS and Android that utilizes a .vue view to handle authentication via Gmail on Firebase. My approach involves using Google as the provider: provider = firebase.auth.GoogleAuthProvider() firebase.auth().s ...

firebasevue.jsfirebase-authenticationgoogle-oauthgoogle-authentication

Disabling modal popup buttons in Bootstrap 4 using Javascript

JSFiddle DEMO: https://jsfiddle.net/2yx16k8L/ I'm encountering an issue with my JS code. I want a click on a div to open the entire content within it. However, this action is causing the modal button in the dropdown to stop working. How can I resolve ...

javascriptjquerybootstrap-4

What is the best location for storing your front-end javascript files?

As I work on my web application using Express, I've utilized the application skeleton provided by the express-generator. To bundle my client-side assets, I've integrated webpack into my project. Now, I'm faced with a dilemma on where to st ...

javascriptnode.jsexpresswebpackexpress-generator

Discovering the best solution based on particular values within a matrix using C#

Looking for the optimal path based on length in a rectangular array like this: https://i.sstatic.net/YYwcZ.png The rules for finding the path are as follows: The starting point is determined by the provided row and column indexes. The path can ...

c#arraysrecursionmultidimensional-array

What is the best way to format a date as "2020-01-16 07:29:43.657519000 Z" using JavaScript?

Upon discovering a format 2020-01-16 07:29:43.657519000 Z in a project, I am curious about the significance of the numbers 657519000 and how to replicate this precise format using JavaScript. When attempting new Date().toISOString(), I receive 2020-05-27T2 ...

javascriptdateformat

Utilize DTOptionsBuilder and AngularJs ColVis to trigger actions when there are changes in column visibility

In my AngularJs project, I am using DTOptionsBuilder with ColVis plugin to show and hide columns in a datatable. I need to perform certain operations when the visibility of the columns changes. I came across an event called 'column-visibility.dt' ...

javascriptangularjsdatatables

The React.js navigation bar hamburger menu refuses to close when toggled

Currently, my team and I have developed a react.js application together. The Navbar feature is functioning correctly, except for a small issue. When the Navbar is toggled using the Hamburger menu on a smaller screen, it opens successfully, but the toggle a ...

javascriptreactjsbootstrap-4

Unlocking Bootstrap variables in Vue development (using Vanilla Bootstrap)

What is the best way to customize or theme bootstrap? I have heard that using sass to override bootstrap variables is recommended, but how can I integrate this into the Vue webpack workflow? I tried searching online and found suggestions to edit the vue.c ...

javascriptvue.jswebpack

Dnd-kit: item loses its place in line when dragged over Droppable area

I've encountered an issue while using @dnd-kit. The sorting function works smoothly (e.g. when I drag the 1st element, it sorts correctly), but once I reach a droppable element (green Thrash), the sorting breaks and the 1st element snaps back. You ca ...

javascriptreactjsdrag-and-dropdnd-kit

Showing Firestore Data as a map type: Issue encountered - React child cannot be an Object

Retrieving data from firestore: const [product, setProduct] = useState([]); const fetchProducts = async () => { const querySnapshot = await getDocs(collection(db, "products")); const productsArray = []; querySnapshot.forEach((doc) => { ...

javascriptreactjsfirebasegoogle-cloud-firestore

Mongodb error occurred due to a duplicate key in the collection with the key value set

I need to set up multiple user accounts. The first account creation is successful, but I encounter an error when trying to create a new account: BulkWriteError: insertDocument :: caused by :: 11000 E11000 duplicate key error index: db.users.$friends. ...

javascriptdatabasemongodbmongoose

What is the best way to retrieve data and handle error messages using the fetch API in Node.js?

I am attempting to utilize Node's 18 fetch API to send requests to a REST server. Below is the code snippet: const get = () => { let response = await fetch("10.0.0.12/test", { method: "GET", }); console.log(&quo ...

javascriptnode.jsfetch-api

Vue 3 now allows for disabling the automatic renaming of CSS properties like "top/bottom/left/right" to "inset"

I noticed that Vue (or maybe Vite) automatically changes my css style attributes from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;" However, this adaptation doesn't work well for older browsers that do not support the i ...

cssvue.jsvuejs3vite

Vue navigation dropdown menu component

I am currently learning how to use Vue 3. I have a menu with children, and I want to display a different component if the menu has a child item, but I'm struggling to implement this feature. I will provide an example of what I am trying to achieve. Th ...

vue.js

Encountered an error while loading resource: server returned a 500 status (Internal Server Error) - A NodeJs Express and MongoDB Web Application hit a snag

I am currently in the process of developing a web application using NodeJS Express and MongoDB. However, I have encountered an issue while attempting to implement AJAX functionality to load and display comments on the post page. The "post-detail" page is ...

javascriptnode.jsajaxmongodbexpress

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

In the process of creating a simple Electron application that facilitates user login into a system, I encounter an issue. The app collects the username and password entered by the user through form text inputs. Upon clicking the "login" button, the program ...

javascriptnode.jshttpscrashelectron

What is the best way to send a put request using axios in a Node.js environment while also altering the request body?

Is there a way for the endpoint to access an additional field in the request object named userData? I was able to achieve this with a get request like so: axios.get(`${this.appConfig.getUrlProperties().core}v1.0/address/`, { data: req.userData }) Howe ...

node.jsexpressaxios

Node.js making an API request

I am encountering an issue with the following code snippet: const req = require("request"); const apiReq = req("http://example.com/car/items.json", (err, res, body) => { if (!err && res.statusCode === 200) { return JSON.parse(body); } } ...

javascriptnode.js

I could use some assistance with iterating through an array that is passed as a parameter to a function

Compute the product of parameter b and each element in the array. This code snippet currently only returns 25. This is because element a[0], which is "5", is being multiplied by argument b, which is also "5". The desired output should be ...

javascript

Creating a circle in SVG that cannot be scaled using Javascript

I'm working on a map project using JavaScript and SVG for drawing the lines. One feature I'd like to implement is the ability to search for a specific road, and if found, display a circle on the map. I understand how to draw a circle in SVG, bu ...

javascriptsvg