download as CSV

vue/src/components/Buttons/DownloadCSV.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a>
+        <b-button v-if="button" @click="downloadFile">{{ label }}</b-button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "DownloadCSV",
+
+    props: {
+        items: { type: Array },
+        name: { type: String },
+        icon: { type: String },
+        label: { type: String },
+        button: { type: Boolean, default: false },
+        delim: { type: String, default: "," },
+    },
+    methods: {
+        downloadFile() {
+            let csvContent = "data:text/csv;charset=utf-8,"
+            csvContent += [Object.keys(this.items[0]).join(this.delim), ...this.items.map((x) => Object.values(x).join(this.delim))].join("\n").replace(/(^\[)|(\]$)/gm, "")
+
+            const data = encodeURI(csvContent)
+            const link = document.createElement("a")
+            link.setAttribute("href", data)
+            link.setAttribute("download", "export.csv")
+            link.click()
+        },
+    },
+}
+</script>