JSFiddle - React, Tailwind, and code Playground

by s_yoshiki

HTML

<div id="app">
  <h2>ダウンロード:</h2>
  <textarea v-model="text"></textarea>
  <br>
  拡張子<input type="text" v-model="ext" />
  <button v-on:click="download">download</button>
</div>

Vue

const today = () => {
	const dt = new Date()
  const y = dt.getFullYear();
  const m = ('00' + (dt.getMonth()+1)).slice(-2);
  const d = ('00' + dt.getDate()).slice(-2);
  return [y,m,d].join('')
}

new Vue({
  el: "#app",
  data: {
    text: '',
    ext: 'csv',
    csvData: [
    	['col1', 'col2', 'col3'],
    	['a', 'b', 'c'],
    	['aa', 'bb', 'cc'],
    ]
  },
  methods: {
  	download: function() {
    	let blob = new Blob([this.text], {type : 'text/plain'});
      let blobURL = window.URL.createObjectURL(blob);
      let obj = document.createElement('a');
      obj.href = blobURL;
      obj.download = `${today()}.${this.ext}`
      this.$el.appendChild(obj);
      obj.click();
      obj.parentNode.removeChild(obj);
      
    }
  },
  created() {
  	this.text = this.csvData.map(e1 => e1.join(",")).join("\n")
  }
})