forked from sheetjs/docs.sheetjs.com
229 lines
8.8 KiB
JavaScript
229 lines
8.8 KiB
JavaScript
const XLSX = require("xlsx");
|
||
// TODO: Replace deprecated @electron/remote with contextBridge‑based IPC in production.
|
||
const electron = require("@electron/remote");
|
||
const { ipcRenderer } = require("electron");
|
||
const path = require("path");
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Supported file extensions
|
||
// ---------------------------------------------------------------------------
|
||
const EXTENSIONS =
|
||
"xls|xlsx|xlsm|xlsb|xml|csv|txt|dif|sylk|slk|prn|ods|fods|htm|html|numbers".split(
|
||
"|",
|
||
);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// DOM references
|
||
// ---------------------------------------------------------------------------
|
||
const dropContainer = document.getElementById("drop-container");
|
||
const fileStatus = document.getElementById("fileStatus");
|
||
const exportBtn = document.getElementById("exportBtn");
|
||
const spinnerOverlay = document.getElementById("spinner-overlay");
|
||
const htmlout = document.getElementById("htmlout");
|
||
const onError = document.getElementById("onError");
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// State & helpers
|
||
// ---------------------------------------------------------------------------
|
||
let currentWorkbook = null; // SheetJS workbook in memory
|
||
const isSpreadsheet = (ext) => EXTENSIONS.includes(ext.toLowerCase());
|
||
const nextPaint = () => new Promise(requestAnimationFrame);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Open external links in default browser (security)
|
||
// ---------------------------------------------------------------------------
|
||
document.addEventListener("click", (e) => {
|
||
if (e.target.tagName === "A" && e.target.href.startsWith("http")) {
|
||
e.preventDefault();
|
||
electron.shell.openExternal(e.target.href);
|
||
}
|
||
});
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Export logic – uses cached workbook (no DOM traversal)
|
||
// ---------------------------------------------------------------------------
|
||
async function exportWorkbookAsFile() {
|
||
if (!currentWorkbook) return displayError("No workbook loaded!");
|
||
// -- 1. use electron save as dialog to get file path
|
||
const { filePath, canceled } = await electron.dialog.showSaveDialog({
|
||
title: "Save file as",
|
||
filters: [{ name: "Spreadsheets", extensions: EXTENSIONS }],
|
||
});
|
||
// -- 2. if canceled or no file path, return
|
||
if (canceled || !filePath) return;
|
||
// -- 3. write workbook to file
|
||
try {
|
||
XLSX.writeFile(currentWorkbook, filePath);
|
||
electron.dialog.showMessageBox({ message: `Exported to ${filePath}` });
|
||
} catch (err) {
|
||
// -- 4. if error, display error
|
||
displayError(`Failed to export: ${err.message}`);
|
||
}
|
||
}
|
||
exportBtn.addEventListener("click", exportWorkbookAsFile);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Render workbook --> HTML tables
|
||
// ---------------------------------------------------------------------------
|
||
function renderWorkbookToTables(wb) {
|
||
// -- 1. convert each sheet to HTML
|
||
const html = wb.SheetNames.map((name) => {
|
||
const sheet = wb.Sheets[name];
|
||
const table = XLSX.utils.sheet_to_html(sheet, { id: `${name}-tbl` });
|
||
// -- 2. wrap in details element
|
||
return `<details class="sheetjs-sheet-container">
|
||
<summary class="sheetjs-sheet-name">${name}</summary>
|
||
<div class="sheetjs-tab-content">${table}</div>
|
||
</details>`;
|
||
}).join(""); // -- 3. join into single string
|
||
// -- 4. render to DOM
|
||
htmlout.innerHTML = html; // single write → single re‑flow of the DOM
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Generic UI helpers
|
||
// ---------------------------------------------------------------------------
|
||
const displayError = (msg) => (onError ? ((onError.textContent = msg), (onError.hidden = false)) : console.error(msg));
|
||
const hideDropUI = () => dropContainer && (dropContainer.style.display = "none");
|
||
const showDropUI = () => dropContainer && (dropContainer.style.display = "block");
|
||
const hideExportBtn = () => (exportBtn.disabled = true);
|
||
const showExportBtn = () => (exportBtn.disabled = false);
|
||
const showSpinner = () => (spinnerOverlay.style.display = "flex");
|
||
const hideSpinner = () => (spinnerOverlay.style.display = "none");
|
||
const hideOutputUI = () => (htmlout.innerHTML = "");
|
||
const hideLoadedFileUI = () => (fileStatus.innerHTML = "");
|
||
const getLoadedFileUI = (fileName) => `<div class="file-loaded">
|
||
<span class="file-name text-muted text-small">${fileName}</span>
|
||
<button type="button" class="unload-btn">Unload</button>
|
||
</div>`;
|
||
|
||
function showLoadedFileUI(fileName) {
|
||
fileStatus.innerHTML = getLoadedFileUI(fileName);
|
||
hideDropUI();
|
||
showExportBtn();
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Event delegation for unload button – avoids per‑render listener leaks
|
||
// ---------------------------------------------------------------------------
|
||
fileStatus.addEventListener("click", (e) => {
|
||
if (e.target.classList.contains("unload-btn")) {
|
||
hideLoadedFileUI();
|
||
hideExportBtn();
|
||
showDropUI();
|
||
hideOutputUI();
|
||
currentWorkbook = null;
|
||
}
|
||
});
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// File‑open dialog handler
|
||
// ---------------------------------------------------------------------------
|
||
async function handleReadBtn() {
|
||
// -- 1. show file open dialog to get the file path
|
||
const { filePaths, canceled } = await electron.dialog.showOpenDialog({
|
||
title: "Select a file",
|
||
filters: [{ name: "Spreadsheets", extensions: EXTENSIONS }],
|
||
properties: ["openFile"],
|
||
});
|
||
// -- 2. if canceled or no file path, return
|
||
if (canceled || !filePaths.length) return;
|
||
// -- 3. if multiple files selected, return error
|
||
if (filePaths.length !== 1) return displayError("Please choose a single file.");
|
||
|
||
showSpinner();
|
||
await nextPaint(); // ensure spinner paints
|
||
try {
|
||
// -- 4. read the first selected file
|
||
const filePath = filePaths[0];
|
||
currentWorkbook = XLSX.readFile(filePath);
|
||
renderWorkbookToTables(currentWorkbook);
|
||
showLoadedFileUI(path.basename(filePath));
|
||
} finally {
|
||
hideSpinner();
|
||
hideDropUI();
|
||
// -- 5. reset error UI state
|
||
onError && (onError.hidden = true);
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Drag‑and‑drop + file input
|
||
// ---------------------------------------------------------------------------
|
||
function addListener(id, evt, fn) {
|
||
const el = document.getElementById(id);
|
||
if (el) el.addEventListener(evt, fn);
|
||
}
|
||
|
||
function attachFileListeners() {
|
||
// file input element
|
||
addListener("readIn", "change", (e) => {
|
||
showSpinner();
|
||
nextPaint().then(() => readFile(e.target.files));
|
||
});
|
||
addListener("readBtn", "click", handleReadBtn);
|
||
|
||
// drag‑and‑drop (applied to whole window for simplicity)
|
||
const onDrag = (e) => {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = "copy";
|
||
};
|
||
|
||
["dragenter", "dragover"].forEach((t) =>
|
||
document.body.addEventListener(t, onDrag, { passive: false })
|
||
);
|
||
|
||
document.body.addEventListener(
|
||
"drop",
|
||
(e) => {
|
||
e.preventDefault();
|
||
readFile(e.dataTransfer.files).catch((err) => displayError(err.message));
|
||
},
|
||
{ passive: false }
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Read File from input or DnD
|
||
// ---------------------------------------------------------------------------
|
||
async function readFile(files) {
|
||
// -- 1. if no files, return
|
||
if (!files || !files.length) return;
|
||
// -- 2. get the first file
|
||
const file = files[0];
|
||
// -- 3. if not a spreadsheet, return error
|
||
const ext = path.extname(file.name).slice(1);
|
||
if (!isSpreadsheet(ext)) return displayError(`Unsupported file type .${ext}`);
|
||
|
||
showSpinner();
|
||
try {
|
||
// -- 4. read the file
|
||
const data = await file.arrayBuffer();
|
||
currentWorkbook = XLSX.read(data);
|
||
// -- 5. render the workbook to tables
|
||
renderWorkbookToTables(currentWorkbook);
|
||
// -- 6. show the loaded file UI
|
||
showLoadedFileUI(file.name);
|
||
} finally {
|
||
hideSpinner();
|
||
// reset error UI state
|
||
onError && (onError.hidden = true);
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Init
|
||
// ---------------------------------------------------------------------------
|
||
attachFileListeners();
|
||
// the file-opened event is sent from the main process when a file is opened using "open with"
|
||
ipcRenderer.on("file-opened", async (_e, filePath) => {
|
||
showSpinner();
|
||
await nextPaint(); // ensure spinner paints
|
||
currentWorkbook = XLSX.readFile(filePath);
|
||
renderWorkbookToTables(currentWorkbook);
|
||
showLoadedFileUI(path.basename(filePath));
|
||
hideSpinner();
|
||
hideDropUI();
|
||
showExportBtn();
|
||
});
|