[feature] export innerText of statistics table as CSV file #47

limitation: only one table can be copied in each file

src/assets/utils.ts

@@ -15,7 +15,7 @@ function download(filename: string, dataURL: string): void {
 export function downloadText(filename: string, text: string): void {
   download(
     filename,
-    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+    "data:text/plain;charset=utf-8,\ufeff" + encodeURIComponent(text)
   );
 }
 

src/components/StatisticsTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="panel-block" style="display: block">
-    <table class="table">
+    <table class="table is-fullwidth" ref="domTable">
       <!-- <thead>
     <tr>
       <th><abbr title="Position">Pos</abbr></th>
@@ -59,11 +59,26 @@
         </tr>
       </tbody>
     </table>
+    <div class="buttons is-centered">
+      <!-- <button class="button" type="button" @click.stop="toggleHorizons">
+        <span class="icon">
+          <font-awesome-icon icon="file-csv" />
+        </span>
+        <span>in Zwischenablage kopieren</span>
+      </button> -->
+
+      <button class="button" type="button" @click.stop="exportCSV">
+        <span class="icon">
+          <font-awesome-icon icon="file-csv" />
+        </span>
+        <span>als CSV speichern</span>
+      </button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useStore } from "@/store";
 import {
   analyseNWKbyCategory,
@@ -72,6 +87,7 @@ import {
   NetworkAnalysis,
 } from "@/data/NetworkAnalysis";
 import { getAlterCategorization } from "@/data/AlterCategories";
+import { downloadText } from "@/assets/utils";
 
 export default defineComponent({
   setup() {
@@ -129,6 +145,15 @@ export default defineComponent({
       }
     };
 
+    const domTable = ref<InstanceType<typeof HTMLTableElement> | null>(null);
+
+    const exportCSV = () => {
+      downloadText(
+        "statistics.csv",
+        (domTable.value as HTMLTableElement).innerText.replaceAll("\t", ";")
+      );
+    };
+
     return {
       networkSize: computed(() => networkAnalysis.value.alterConnected),
       naehenSum: computed(() => networkAnalysis.value.naehenSum),
@@ -139,6 +164,8 @@ export default defineComponent({
       bridgePersons: makeComputedAlterGroup("bridgePersons"),
       bridgesCount: computed(() => networkAnalysis.value.bridges.length),
       clickCell,
+      exportCSV,
+      domTable,
     };
   },
 });

src/components/StatisticsTableCategories.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="panel-block" style="display: block">
-    <table class="table">
+    <table class="table is-fullwidth">
       <thead>
         <tr>
           <th></th>

src/main.ts

@@ -25,6 +25,7 @@ import {
   faFile,
   faSave,
   faFileImage,
+  faFileCsv,
   // faChevronDown,
   // faUndoAlt,
   // faRedoAlt,
@@ -50,6 +51,7 @@ library.add(
   faFile,
   faSave,
   faFileImage,
+  faFileCsv,
   // faChevronDown,
   // faUndoAlt,
   // faRedoAlt,