prasi-lib/comps/list/ExportExcel.tsx

88 lines
2.5 KiB
TypeScript
Executable File

import { useLocal } from "@/utils/use-local";
import { FC, MouseEvent } from "react";
import ExcelJS from "exceljs";
export const ExportExcel: FC<{
data: any[],
fileName?: string
}> = ({
data, fileName = "exported_data.xlsx"
}): JSX.Element => {
const local = useLocal({
data: [] as any[]
});
local.data = data;
local.render();
const getAllKeys = (arr: Array<Record<string, any>>): string[] => {
const keysSet = new Set<string>();
arr.forEach(obj => {
Object.keys(obj).forEach(key => keysSet.add(key));
});
return Array.from(keysSet);
};
// const handleExport = async (e: MouseEvent<HTMLButtonElement>) => {
// try {
// const workbook = new ExcelJS.Workbook();
// const worksheet = workbook.addWorksheet("Sheet 1");
// const columns = getAllKeys(local.data);
// worksheet.addRow(columns);
// local.data.forEach((row) => {
// const values = columns.map((col) => row[col]);
// worksheet.addRow(values);
// });
// const buffer = await workbook.xlsx.writeBuffer();
// const blob = new Blob([buffer], {
// type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
// });
// // FileSaver.saveAs(blob, fileName);
// console.log("Data exported");
// } catch (error) {
// console.error("Error exporting data:", error);
// }
// };
const handleExport = async (e: MouseEvent<HTMLButtonElement>) => {
try {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet("Sheet 1");
const columns = getAllKeys(local.data);
worksheet.addRow(columns);
local.data.forEach((row) => {
const values = columns.map((col) => row[col]);
worksheet.addRow(values);
});
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
const a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "my-exported-data.xlsx";
a.click();
console.log("Data exported");
} catch (error) {
console.error("Error exporting data:", error);
}
};
return (
<div>
<button onClick={handleExport} style={{ background: '#00ffff' }}>Export</button>
</div>
);
};