Merge pull request #13 from ynishi/add_options

support options

Author: ynishi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuecsv",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "CSV components for Vue.js",
   "homepage": "https://github.com/ynishi/vuecsv",
   "repository": {
@@ -21,6 +21,8 @@
     "prepare": "npm run build"
   },
   "dependencies": {
+    "bootstrap": "4.0.0-beta.2",
+    "bootstrap-vue": "^1.4.1",
     "file-saver": "^1.3.3",
     "papaparse": "^4.3.6",
     "testdouble": "^3.3.1",

src/components/CsvDownload.vue

@@ -1,26 +1,43 @@
 <template>
   <div class="csvdownload">
-    <button @click="download">{{ title }}</button>
+      <button @click="download">{{ title }}</button>
+      <optionModal v-on:downloadByModal="emitDownload" v-on:sendOptions="emitOptions"></optionModal>
   </div>
 </template>
 
 <script>
 import Papa from 'papaparse'
 import * as FS from 'file-saver'
 
+import CsvOption from './CsvOption.vue'
+
 export default {
   name: 'CsvDownload',
+  components: {
+    'optionModal': CsvOption
+  },
   props: {
     title: {
       type: String,
       default: 'Download'
     },
     filename: {
       type: String,
-      default: 'download.csv'
+      default: 'download'
     },
-    convOption: {
-      type: Object
+    options: {
+      type: Object,
+      default: () => {
+        return {
+          quotes: true,
+          quoteChar: '"',
+          delimiter: ',',
+          newline: '\r\n',
+          header: true,
+          timestamp: false,
+          comp: false
+        }
+      }
     },
     header: {
       type: Object
@@ -35,9 +52,10 @@ export default {
     }
   },
   methods: {
-    convert () {
+    convert (options) {
+      var dataCSV
       if (typeof this.header === 'undefined' || this.header === '') {
-        this.dataCSV = Papa.unparse(this.dataJson, this.convOption)
+        dataCSV = Papa.unparse(this.dataJson, options)
       } else {
         var d = {
           fields: Object.values(this.header),
@@ -51,17 +69,65 @@ export default {
           }
           d.data.push(a)
         }
-        this.dataCSV = Papa.unparse(d, this.convOption)
+        dataCSV = Papa.unparse(d, options)
       }
+      return dataCSV
+    },
+    emitOptions (options) {
+      this.options = options
+    },
+    emitDownload (options) {
+      this._download(options)
     },
     download () {
-      this.convert()
-      if (typeof this.dataCSV === 'undefined' || this.dataCSV === '') {
+      this._download(this.options)
+    },
+    _makeFilename (base, delimiter, timestamp) {
+      var t = base
+      if (timestamp) {
+        const now = new Date()
+        t += '_' + now.getFullYear() +
+               ('0' + (now.getMonth() + 1)).slice(-2) +
+               ('0' + now.getDate()).slice(-2) +
+               ('0' + now.getHours()).slice(-2) +
+               ('0' + now.getMinutes()).slice(-2)
+      }
+
+      switch (delimiter) {
+        case '\t':
+          t += '.tsv'
+          break
+        case ',':
+          t += '.csv'
+          break
+        default:
+          t += '.txt'
+          break
+      }
+      return t
+    },
+    _download (options) {
+      var filename
+      var opts
+
+      if (typeof options.filename === 'undefined' || options.filename === '') {
+        filename = this.filename
+      } else {
+        filename = options.filename
+      }
+      filename = this._makeFilename(filename, options.delimiter, options.timestamp)
+      if (typeof options === 'undefined' || options === '') {
+        opts = this.options
+      } else {
+        opts = options
+      }
+      const dataCSV = this.convert(opts)
+      if (typeof dataCSV === 'undefined' || dataCSV === '') {
         alert('no data')
         return
       }
-      const blob = new Blob([this.dataCSV], {type: 'text/csv;charset=utf-8'})
-      FS.saveAs(blob, this.filename)
+      const blob = new Blob([dataCSV], {type: 'text/csv;charset=utf-8'})
+      FS.saveAs(blob, filename)
     }
   }
 }