feat: emved link

README.md

@@ -3,16 +3,16 @@
 ## Excel
 The Obsidian-Excel plugin integrates [x-spreadsheet](https://github.com/myliang/x-spreadsheet), a feature sheet tool, into Obsidian. You can store and edit `xlsx` files in your vault.
 
-![Alt text](./doc/img/image.png)
+### create sheet file
+![Alt text](./doc/img/create.gif)
 
 ### import/export xlsx file
 If you are using Microsoft Office 365 to create xlsx files, you need to import the display.
 
-![import](./doc/img/import.png)
+![import](./doc/img/import.gif)
 
 
 ## TODO
-✅ import/export excel
-- [X] link to markdown
+- link to markdown
 
 

src/Excel.ts

@@ -25,7 +25,7 @@ export class Excel extends MarkdownRenderChild {
 		const sheet = new Spreadsheet(sheetEle, {
 			mode: "read",
 			showToolbar: false,
-			showBottomBar: false,
+			showBottomBar: true,
 			view: {
 				height: () => 300,
 				width: () => this.containerEl.clientWidth,

src/ExcelView.ts

@@ -12,6 +12,7 @@ export class ExcelView extends TextFileView {
 	public sheet: Spreadsheet;
 	public importEle: HTMLElement;
 	public exportEle: HTMLElement;
+	public embedLinkEle: HTMLElement;
 	public sheetEle: HTMLElement;
 
 	constructor(leaf: WorkspaceLeaf, plugin: ExcelPlugin) {
@@ -41,14 +42,17 @@ export class ExcelView extends TextFileView {
 	handleFile(e: Event) {
 		//@ts-ignore
 		const files = e.target?.files;
+		if (!files) {
+			new Notice('Failed to get file')
+			return
+		}
 		const f = files[0];
 		const reader = new FileReader();
-		const instance = this;
 		reader.onload = (e) => {
 			const data = e.target?.result;
-
+			
 			if (data) {
-				instance.process_wb(XLSX.read(data));
+				this.process_wb(XLSX.read(data));
 			} else {
 				new Notice('Read file error')
 			}
@@ -58,7 +62,12 @@ export class ExcelView extends TextFileView {
 
 	process_wb(wb: XLSX.WorkBook) {
 		const sheetData = stox(wb);
-		this.sheet.loadData(sheetData);
+		if (sheetData) {
+			this.sheet.loadData(sheetData);
+			this.data = JSON.stringify(sheetData);
+		} else {
+			new Notice('Data parsing error')
+		}
 	}
 
 	handleExportClick(ev: MouseEvent) {
@@ -69,6 +78,17 @@ export class ExcelView extends TextFileView {
 		XLSX.writeFile(new_wb, title + ".xlsx", {});
 	}
 
+	handleEmbedLink(e:Event) {
+		if (this.file) {
+			navigator.clipboard.writeText(
+				`![[${this.file.path}]]`,
+			);
+			new Notice('Copy embed link to clipboard')
+		} else {
+			new Notice('Copy embed link failed')
+		}
+	}
+
 	onload(): void {
 		this.ownerWindow = this.containerEl.win;
 
@@ -81,29 +101,9 @@ export class ExcelView extends TextFileView {
 			this.handleExportClick(ev)
 		);
 
-		app.workspace.onLayoutReady(async () => {
-			this.sheetEle = this.contentEl.createDiv({
-				attr: {
-					id: "x-spreadsheet",
-					class: "sheet-box",
-				},
-			});
-
-			// 添加导入input，用来选择导入的文件
-			const importInput = this.contentEl.createEl("input", {
-				cls: "import-excel",
-				type: "file",
-				attr: {
-					id: "import",
-					accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-				},
-			});
-			importInput.addEventListener(
-				"change",
-				this.handleFile.bind(this),
-				false
-			);
-		});
+		this.embedLinkEle = this.addAction("link", "copy embed link", (ev) =>
+			this.handleEmbedLink(ev)
+		);
 
 		super.onload();
 	}
@@ -117,11 +117,34 @@ export class ExcelView extends TextFileView {
 	}
 
 	refresh() {
-		this.sheetEle.empty();
+		this.contentEl.empty();
+		this.sheetEle = this.contentEl.createDiv({
+			attr: {
+				id: "x-spreadsheet",
+				class: "sheet-box",
+			},
+		});
+
+		// 添加隐藏的导入input，用来选择导入的文件
+		const importInput = this.contentEl.createEl("input", {
+			cls: "import-excel",
+			type: "file",
+			attr: {
+				id: "import",
+				accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+			},
+		});
+		importInput.addEventListener(
+			"change",
+			this.handleFile.bind(this),
+			false
+		);
+
+		// 初始化 sheet
 		const jsonData = JSON.parse(this.data || "{}") || {};
 		//@ts-ignore
 		this.sheet = new Spreadsheet(this.sheetEle, {
-			showBottomBar: false,
+			showBottomBar: true,
 				view: {
 					height: () => this.contentEl.clientHeight,
 					width: () => this.contentEl.clientWidth,
@@ -130,11 +153,9 @@ export class ExcelView extends TextFileView {
 			.loadData(jsonData) // load data
 			.change((data) => {
 				// save data to db
+				console.log('save data to db')
 				this.data = JSON.stringify(data);
 			})
-			.on('cells-selected', (cell, { sri, sci, eri, eci}) => {
-				console.log(cell, sri, sci, eri, eci)
-			})
 
 		// @ts-ignore
 		this.sheet.validate();

styles.css

@@ -5,12 +5,6 @@
 	padding: 0;
 }
 
-.sheet-iframe {
-	width: 100%;
-	height: 300px;
-	background-color: red;
-}
-
 .import-excel {
 	position: absolute;
 	right: 0;
@@ -19,6 +13,21 @@
 	opacity: 0;
 }
 
+/* Markdown 文档引入样式设置*/
+.sheet-iframe {
+	width: 100%;
+	height: 300px;
+	background-color: var(--background-primary-alt);
+}
+
+ul.x-spreadsheet-menu  {
+    margin-block-start: 0;
+}
+
+.sheet-iframe .x-spreadsheet-menu > li .x-spreadsheet-icon {
+	display: none;
+}
+
 /* node_modules/x-data-spreadsheet/src/index.less */
 body {
 	margin: 0;