diff --git a/README.md b/README.md index 55fa728..f9e98e6 100644 --- a/README.md +++ b/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 diff --git a/doc/img/create.gif b/doc/img/create.gif new file mode 100644 index 0000000..8b6baa9 Binary files /dev/null and b/doc/img/create.gif differ diff --git a/doc/img/image.png b/doc/img/image.png deleted file mode 100644 index 36eafbc..0000000 Binary files a/doc/img/image.png and /dev/null differ diff --git a/doc/img/import.gif b/doc/img/import.gif new file mode 100644 index 0000000..e2638a0 Binary files /dev/null and b/doc/img/import.gif differ diff --git a/doc/img/import.png b/doc/img/import.png deleted file mode 100644 index 1a4eb26..0000000 Binary files a/doc/img/import.png and /dev/null differ diff --git a/doc/img/link.gif b/doc/img/link.gif new file mode 100644 index 0000000..77b1f90 Binary files /dev/null and b/doc/img/link.gif differ diff --git a/src/Excel.ts b/src/Excel.ts index f852c32..450846a 100644 --- a/src/Excel.ts +++ b/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, diff --git a/src/ExcelView.ts b/src/ExcelView.ts index 7733cb7..f427fb4 100644 --- a/src/ExcelView.ts +++ b/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(); diff --git a/styles.css b/styles.css index f3ada53..6eac624 100644 --- a/styles.css +++ b/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;