Files
front-Censo/src/components/Dowload/tabla.tsx
T
2026-03-26 09:51:36 -05:00

73 lines
1.6 KiB
TypeScript

"use client";
import styles from "./style.module.css";
import Cookies from "js-cookie";
import { useState } from "react";
import axios from "axios";
interface Props {
filtros: any;
count?: boolean;
}
export default function DownloadTable({ filtros, count }: Props) {
const [loading, setLoading] = useState(false);
const handleDownload = async () => {
if (!filtros) { return }
setLoading(true);
try {
const token = Cookies.get("token");
const headers = { Authorization: `Bearer ${token}` };
const endpoint = count
? "/equipos/excel/tabla/count"
: "/equipos/excel/tabla";
const response = await axios.post(
`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
filtros,
{
headers,
responseType: "blob",
}
);
const url = window.URL.createObjectURL(new Blob([response.data]));
console.log(url)
const a = document.createElement("a");
a.href = url;
a.download = "reporte.xlsx";
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
} catch (error) {
console.error(error);
alert("Hubo un problema al descargar el archivo.");
} finally {
setLoading(false);
}
};
return (
<button
className={styles.downloadBtn}
onClick={handleDownload}
disabled={loading}
>
{loading ? (
<div className={styles.loader}></div>
) : (
<img
src="/excel.svg"
alt="Excel"
className={styles.iconExcel}
width={30}
height={30}
/>
)}
</button>
);
}