Changeset 35384 for main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

Timestamp:

2021-09-14T11:13:37+12:00 (3 years ago)

Author:

davidb

Message:

Implement transcription text download

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue (modified) (4 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

@@ -8 +8 @@
 
             <span>{{ translations.get("TranscriptionItem_FileName") }}: {{ transcription.fileName }}</span>
+
+            <button @click="downloadAsText" type="button">
+                <span class="material-icons">download</span>
+                <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
+            </button>
 
             <button class="theme-error" @click="remove" type="button">
@@ -36 +41 @@
     display: grid;
     gap: 0.5em 0.5em;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr auto auto;
     align-items: center;
 
@@ -52 +57 @@
 <script>
 import { mapState } from "vuex";
+import { saveAs } from "file-saver"
 import TranscriptionItemEditor from "./TranscriptionItemEditor.vue"
 import { TranscriptionViewModel } from "../main";
@@ -85 +91 @@
             // Start our removal animation and give it some time to complete
             Util.delay(550).then(() => this.$store.commit("transcriptionRemove", this.transcription.id));
+        },
+        downloadAsText() {
+            const extensionIndex = this.transcription.fileName.lastIndexOf(".");
+            let fileName = this.transcription.fileName.slice(0, extensionIndex);
+            fileName += "_transcription.txt";
+
+            const blob = new Blob([ this.transcription.transcription ], { type: "text/plain;charset=utf-8" });
+            saveAs(blob, fileName);
         }
     }