Handle Laravel Excel::download with VueJs-CodePudding

Here is what I did

In Laravel

return Excel::download($report, 'coupons-report.xlsx');

In Vue

 async submitDates() {
      await this.$axios({
        url: "/exports/coupons?from=01-01-2020&to=30-03-2022", //your url
        method: "GET",
        responseType: "blob"
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "file");
        document.body.appendChild(link);
        link.click();
      }); // Please catch me!
    },

What I expect

An Excel file downloaded with expected data

What actually happens

A file with null.

Note: When I use Postman and save the response as a file I get the correct result.

CodePudding user response：

Excel::download($report, 'coupons-report.xlsx') seems not giving blob as return. You can try use this responseType: 'arraybuffer' as response and set const url to be

var url = new Blob([response], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});

CodePudding user response：

I'm not sure if this is going to help you, but this is what I did using Laravel Excel to download the file from a VueJS component:

window.open("/exports/coupons?from=01-01-2020&to=30-03-2022").focus();

This will open a new window, download the file, and then close.