From 4518cc89677d29b79ded9550acc5e9914c6f0b73 Mon Sep 17 00:00:00 2001 From: notchris Date: Tue, 21 Sep 2021 15:03:05 -0400 Subject: [PATCH] VueJS 3 demo [ci skip] --- demos/vue/SheetJS-vue.js | 12 ++++++-- demos/vue/index.html | 3 +- demos/vue/index3.html | 63 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 demos/vue/index3.html diff --git a/demos/vue/SheetJS-vue.js b/demos/vue/SheetJS-vue.js index e508434..7180216 100644 --- a/demos/vue/SheetJS-vue.js +++ b/demos/vue/SheetJS-vue.js @@ -12,8 +12,7 @@ var SJSTemplate = [ '
', '' ].join(""); - -Vue.component('html-preview', { +var component_struct = { template: SJSTemplate, methods: { onchange: function(evt) { @@ -59,4 +58,11 @@ Vue.component('html-preview', { XLSX.writeFile(wb, "sheetjs.xlsx"); } } -}); +}; +var app; +if(Vue.component) { + Vue.component('html-preview', component_struct); +} else { + app = Vue.createApp({}); + app.component('html-preview', component_struct); +} diff --git a/demos/vue/index.html b/demos/vue/index.html index 67cdaa6..1870671 100644 --- a/demos/vue/index.html +++ b/demos/vue/index.html @@ -55,7 +55,8 @@ This demo shows a sample Vue component "html-preview" that: diff --git a/demos/vue/index3.html b/demos/vue/index3.html new file mode 100644 index 0000000..c5dcb58 --- /dev/null +++ b/demos/vue/index3.html @@ -0,0 +1,63 @@ + + + + + + SheetJS + VueJS3 + + + + + + + + + + + + + + + +
+SheetJS + VueJS2 demo
+
+The core library can be used as-is in Vue applications.
+The Community Edition README details some common use cases.
+We also have some more public demos
+
+This demo shows a sample Vue component "html-preview" that:
+- displays a file input that accepts a spreadsheet file
+- draws the first worksheet of a submitted file as HTML
+- presents an export button to generate XLSX files
+
+Sample Spreadsheet
+
+ + +
+ +
+ + + + +