Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

How to download xls file in browser with vue page ?

If there is a way in laravel 5.8 / vue 2.6 app with axios 0.18 sending request from vue page to Laravel control to generate excel file “*.xlsx” with maatwebsite/excel 3.1 and download it in browser ? If yes how can I do it?

Thank you!

0 likes
2 replies
mstdmstd's avatar

DETAILS : On client side :

export function exportIntoExcel() {
    return new Promise((res, rej) => {
        axios.post('/api/items/exportIntoExcel', {params:  {}})
            .then((response) => {
                res(response.data);
            })
            .catch((err) => {
                rej(err);
            })
    });
}

In controller I tried :

    public function exportIntoExcel($subdomain, Request $request)
    {
        $request= request();
        return Excel::download(new ItemsExport, 'items.xlsx');
   }

File items.xlsx is not downloaded in browser, looks like axios can not do it. Any other tools/decisions for this ?

SDCODE's avatar

To download an XLS file in the browser with Vue, you can use the FileSaver.js library, which provides an easy way to save files in the browser. Here's an example of how to modify your code to use FileSaver.js: Install the file-saver package using npm:

npm install file-saver --save

Import the package and modify your exportIntoExcel() function as follows:

import axios from 'axios';
import { saveAs } from 'file-saver';

export function exportIntoExcel() {
  return new Promise((res, rej) => {
    axios.post('/api/items/exportIntoExcel', {}, { responseType: 'blob' })
      .then((response) => {
        const filename = 'items.xlsx';
        const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
        saveAs(blob, filename);
        res(response.data);
      })
      .catch((err) => {
        rej(err);
      });
  });
}

Here, we've added the responseType: 'blob' option to the axios.post() call to ensure that the response data is returned as a blob. We've also created a Blob object from the response data and set the type option to application/vnd.ms-excel to indicate that it's an Excel file.

Next, we've used the saveAs() function from file-saver to save the blob as a file with the given filename. The saveAs() function will automatically prompt the user to download the file.

On the server side, you can keep your existing code as is. The Excel::download() method from Laravel-Excel will generate the Excel file and return it as a download.

Please or to participate in this conversation.