https://maichike.com/assets/controllers/download_excel_controller-a9bb12fa.js

1import {Controller} from "@hotwired/stimulus";
2
3export default class extends Controller {
4
5    connect() {
6        // Add an event listener to the form
7        console.log("DownloadExcelController connected");
8        this.form = document.getElementById("bill-search");
9    }
10
11    download(event) {
12        event.preventDefault(); // Prevent default button action
13
14        // Extract the form action and append format parameter
15        const form = this.form;
16        const fromData = new FormData(form);
17        const url = new URL(form.action);
18
19        // Convert the form data to a query string
20        for (const [key, value] of fromData.entries()) {
21            url.searchParams.set(key, value);
22        }
23
24        url.searchParams.set("format", "xlsx");
25        // Send the request without Turbo
26        fetch(url, {
27            method: "GET",
28            headers: {
29                "Turbo-Frame": "false",
30            },
31        })
32            .then((response) => {
33                if (response.ok) {
34                    return response.blob();
35                } else {
36                    throw new Error("Failed to download the Excel file");
37                }
38            })
39            .then((blob) => {
40                // Create a downloadable link
41                const url = window.URL.createObjectURL(blob);
42                const a = document.createElement("a");
43                a.href = url;
44                a.download = "bills.xlsx";
45                document.body.appendChild(a);
46                a.click();
47                a.remove();
48                window.URL.revokeObjectURL(url);
49            })
50            .catch((error) => {
51                console.error(error);
52            });
53    }
54}