ljcoder2015_obsidian-excel/src/ExcelView.ts

import ExcelPlugin from "main";
import { TextFileView, WorkspaceLeaf } from "obsidian";
import Spreadsheet from "x-data-spreadsheet";
import * as XLSX from "xlsx";
import { stox, xtos } from "./utils/xlsxspread";

export const VIEW_TYPE_EXCEL = "excel-view";

export class ExcelView extends TextFileView {
	public plugin: ExcelPlugin;
	public ownerWindow: Window;
	public sheet: any;
	public importEle: HTMLElement;
	public exportEle: HTMLElement;

	constructor(leaf: WorkspaceLeaf, plugin: ExcelPlugin) {
		super(leaf);
		this.plugin = plugin;
	}

	getViewData(): string {
		return this.data;
	}

	setViewData(data: string, clear: boolean): void {
		this.data = data;

		this.contentEl.empty();
		this.contentEl.createDiv({
			attr: {
				id: "x-spreadsheet",
				class: "sheet-box",
			},
		});

		const jsonData = JSON.parse(this.data || "{}") || {};

		//@ts-ignore
		this.sheet = new Spreadsheet("#x-spreadsheet", {
			view: {
				height: () => this.contentEl.clientHeight,
				width: () => this.contentEl.clientWidth,
			},
		})
			.loadData(jsonData) // load data
			.change((data) => {
				// save data to db
				this.data = JSON.stringify(data);
			});

		this.sheet.validate();

		// 导入导出
		const importInput = this.contentEl.createEl("input", {
			cls: "import-excel",
			type: "file",
			attr: { id: "import" },
		});
		importInput.addEventListener(
			"change",
			this.handleFile.bind(this),
			false
		);

		// 添加顶部导入按钮
		if (!this.importEle) {
			this.importEle = this.addAction(
				"download",
				"import xlsx file",
				(ev) => this.handleImportClick(ev)
			);
		}

		if (!this.exportEle) {
			this.exportEle = this.addAction(
				"upload",
				"export xlsx file",
				(ev) => this.handleExportClick(ev)
			);
		}
	}

	// 处理顶部导入按钮点击事件
	handleImportClick(ev: MouseEvent) {
		const importEle = document.getElementById("import");
		importEle?.click();
		// 打开文件
		console.log("handleImportClick", importEle);
	}

	handleFile(e: Event) {
		console.log("handleFile", e);
		//@ts-ignore
		const files = e.target?.files;
		var f = files[0];
		var reader = new FileReader();
		var instance = this;
		reader.onload = (e) => {
			const data = e.target?.result;
			console.log(data, instance);

			instance.process_wb(XLSX.read(data));
		};
		reader.readAsArrayBuffer(f);
	}

	process_wb(wb: XLSX.WorkBook) {
		const sheetData = stox(wb);
		this.sheet.loadData(sheetData);
	}

	handleExportClick(ev: MouseEvent) {
		var new_wb = xtos(this.sheet.getData()) as XLSX.WorkBook;
		var title = this.file?.basename ?? "sheet"
  		/* write file and trigger a download */
  		XLSX.writeFile(new_wb, title + '.xlsx', {});
	}

	onload(): void {
		const apiMissing = Boolean(
			typeof this.containerEl.onWindowMigrated === "undefined"
		);
		this.ownerWindow = this.containerEl.win;
	}

	clear(): void {
		this.data = "";
	}

	getViewType(): string {
		return VIEW_TYPE_EXCEL;
	}
}