Corrupted Excel file after downloading using the axios library in Vue.js

I'm having trouble downloading an Excel file using axios.

Below is the code I have tried:

     axios.post(backendURL + 'api/client?file_name='+file_name,params, {
        file_name: file_name
    }, {
        responseType: 'blob'
    }).then((response) => {
        const url = URL.createObjectURL(new Blob([response.data], {
            type: 'application/vnd.ms-excel'
        }))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', file_name)
        document.body.appendChild(link)
        link.click()
    });

However, when I try to open the downloaded file "filename.xlsx", I receive an error stating "Excel cannot open the file because the file format or file extension is not valid. Verify that the file has not been corrupted and that the file extension matches the format of the file".

I have searched online for solutions but none of them seem to work. Can someone please help me with this issue?

javascriptexcelvue.jsaxiosblob

Answer №1

  fetchFile() {
            axios({
                url: this.scenario.file,  //.substring(0, this.scenario.file.lastIndexOf("/"))
                method: "GET",
                headers: {"Accept": "application/vnd.ms-excel"},
                responseType: "blob"
            }).then(response => {
                const fileURL = window.URL.createObjectURL(new Blob([response.data]));
                const fileLink = document.createElement("a");

                fileLink.href = fileURL;
                fileLink.setAttribute("download", "file.xlsx");
                document.body.appendChild(fileLink);

                fileLink.click();
            });
        },

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

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

By utilizing Express, Node, and Angular, I incorporated an HTML button on my website that triggers a get request to Express. This request then executes a function that logs a predefined message to the console. Initially, when I click the button for the fir ...

javascriptangularjsnode.jsexpress

Error in Node.js child_process: unable to access the property '_writableState' as it is undefined

I'm currently working on integrating ffmpeg's functionality into a Node.js API by utilizing the child_process library. However, I encounter an error when trying to pass data to ffmpeg's stdin pipe, specifically getting a TypeError: Cannot re ...

javascriptnode.jsffmpegprocesschild-process

Flask Session Persistence Issue: Postman Successful, Javascript Fails

Developing a Flask server to facilitate communication between backend Python functionality and Javascript clients on the web has been my recent project. I am trying to harness Flask's `session` variable to retain user-specific data throughout their in ...

javascriptpythonjsonsessionflask

Deciphering the intricacies of VUEX-STORE modules

Consider this scenario: I have two separate lists - one for income and one for outcome. Each list has its own storage, and I am adding these storages as modules in index.js. While I could create a single repository for both income and outcome, displaying ...

javascriptvuejs2vuexstorevuex-modules

Is it possible to alter the value of a global variable within a function and switch its value based on a local variable?

Currently, I am facing an issue with changing the value of a global variable dynamically from a function. The variable has a global scope and is also present in the same function as a local variable. However, despite my efforts, I am unable to successful ...

javascriptvue.js

Linking to a Different Tab without Tab Mutation with Bootstrap 3.3.5

I am facing a similar issue to the mentioned questions. I am trying to use a link to change tabs, but the problem is that the link only changes the tab content and not the active tab. The most similar question can be found at: Bootstrap linking to a tab w ...

javascriptjqueryhtmltwitter-bootstraptabs

What could be causing Vue to not fully parse the JSON object that I am sending from PHP as a prop?

My current challenge involves passing a JSON object as a prop into a Vue component. The JSON object is generated using the `json_encode()` function on a WordPress query that retrieves all posts for the page. To ensure proper formatting, I am also employing ...

phpjsonwordpressvue.js

How can I invoke a function from a Cell Renderer in the ag-Grid library?

Currently, in my Vue.js application, I am utilizing a cellRenderer and I am looking to invoke a function from the cell renderer. Below is a snippet of my code: gridColumns() { return [{ headerName: "Actions", cellRenderer: 'iconRender ...

vue.jsag-gridcellrenderer

What is the process for transferring an environment.json file to the output directory and then utilizing it with Webpack 4?

Our application is expanding with multiple environments and vendors on the horizon. While the traditional approach of running webpack --env.NODE_ENV=myenvironment works for now, it will soon become inefficient. The main objective here is to streamline the ...

javascriptangularjswebpackoctopus-deploy

What is the process for configuring the npm build settings to move my CSS and JS files into the static folder? I am using Vue CLI 3, npm, and Vuetify for my project

Currently, I am utilizing Vue CLI 3 along with Vuetify. My backend developer has requested that I place my css, js, and image files in a static folder for his access. However, I am unable to locate the webpack.config.js file within the structure of Vue CLI ...

vue.jsnpmwebpackvuetify.js

Vuejs Emailjs Vee-validate TypeError: Unable to access property 'target' as it is undefined

I've encountered an issue with validating and sending my data using emailjs and vee-validate. It seems to work fine without vee-validate. Can anyone assist me with this problem? Thank you. Software Versions: vee-validate: 3.4.5 vue: 2.6.6 emailjs: & ...

vue.jsvee-validate

Adding a loader to the specific button that has been clicked can be achieved by following these steps:

I am currently in the process of building an e-commerce platform website and I'm looking to implement a feature where users can add products to their cart with just a click of a button. However, before the product is added to the cart, I want to disp ...

javascriptreactjsnext.js

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here. After ...

javascriptjqueryhtmlcss

HTTP-Proxy load balancing techniques

Currently exploring the http-proxy module. From what I gathered, it balances between two different hosts with the same port. My question is, can it also balance between two different ports while using the same hosts (for example, both hosts having the sa ...

javascriptnode.jsload-balancingnode-http-proxy

Pass data from JavaScript to PHP using AJAX

Using Leaflet to display a map, I have incorporated ajax into my onEachFeature function in order to retrieve variables to pass to PHP. Here is the code snippet: function onEachFeature(feature, layer) { layer.bindPopup(feature.properties.IDLo); layer. ...

javascriptphpajaxleaflet

What steps can I take to incorporate a user-controlled autoscroll feature into this Carousel?

I am in the process of creating a "slideshow" using text boxes that can be scrolled with arrow buttons. My goal is to have the slideshow automatically scroll only until the user interacts by clicking one of the arrow buttons. Below is the state logic re ...

javascriptreactjsweb

The PasswordResetView in Django using Vue.js encounters a 403 Forbidden error when attempting to post with Axios due to an

I'm currently working on building a unique Email Restore page in the frontend using Vue.js. My goal is to send email input data via Axios to /api/v1/accounts/password_reset/, essentially utilizing the original ResetPasswordView as an endpoint instead ...

javascriptpythondjangovue.jsdjango-rest-framework

leveraging angular service with ionic framework

(function () { 'use strict'; angular .module('app') .factory('UserService', UserService); UserService.$inject = ['$http']; function UserService($http) { var service = {}; ...

javascriptangularjsionic-framework

Issue with Vue.js Axios: router.push not redirecting properly

Encountering an issue with my Axios get call where the error is not redirecting the user to the desired route. Here's the scenario: A user lands on a blog list they created at mydomain/bloglist. The user clicks on an individual blog link and goes to ...

vue.js