This commit is contained in:
rizrmd 2024-06-22 07:54:47 +00:00
parent 40857be95c
commit 7e30a03672
3 changed files with 90 additions and 90 deletions

View File

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

View File

@ -1,10 +1,10 @@
import type * as exceljs from "exceljs"; // import type * as exceljs from "exceljs";
export type ExcelJS = typeof exceljs; // export type ExcelJS = typeof exceljs;
const w = window as unknown as { // const w = window as unknown as {
_exceljs: any; // _exceljs: any;
}; // };
export const importExcelJs = async (): Promise<ExcelJS> => { // export const importExcelJs = async (): Promise<ExcelJS> => {
if (w._exceljs) return w._exceljs; // if (w._exceljs) return w._exceljs;
w._exceljs = await import("exceljs"); // // w._exceljs = await import("exceljs");
return w._exceljs; // return w._exceljs;
}; // };

View File

@ -3,7 +3,7 @@ import { GFCol, createItem, parseGenField } from "../utils";
import { on_load } from "./on_load"; import { on_load } from "./on_load";
import { codeBuild, codeBuildTest } from "../master_detail/utils"; import { codeBuild, codeBuildTest } from "../master_detail/utils";
// import * as Excel from "exceljs"; // import * as Excel from "exceljs";
import ExcelJS from "exceljs"; // import ExcelJS from "exceljs";
export const gen_export = async ( export const gen_export = async (
modify: (data: any) => void, modify: (data: any) => void,
@ -52,22 +52,22 @@ export const gen_export = async (
`SELECT ${selectFields} FROM ${tableName};` `SELECT ${selectFields} FROM ${tableName};`
); );
const workbook = new ExcelJS.Workbook(); // const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet("Sheet 1"); // const worksheet = workbook.addWorksheet("Sheet 1");
const columns = Object.keys(result[0]); // const columns = Object.keys(result[0]);
worksheet.addRow(columns); // worksheet.addRow(columns);
result.forEach((row) => { // result.forEach((row) => {
const values = columns.map((col) => row[col]); // const values = columns.map((col) => row[col]);
worksheet.addRow(values); // worksheet.addRow(values);
}); // });
const buffer = await workbook.xlsx.writeBuffer(); // const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], { // const blob = new Blob([buffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
}); // });
// FileSaver.saveAs(blob, "exported_data.xlsx"); // FileSaver.saveAs(blob, "exported_data.xlsx");