JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css">
<div id="app">
  <input class="form-control" type="text" placeholder="Paste stuff here" @change="tryAdd" @keyup="tryAdd" @keypress="tryAdd" v-model="input">
  <button class="btn btn-large" @click="download">Download</button>
  <table class="table table-striped table-hover">
    <tr>
      <th v-for="column in columns">{{column}}</th>
    </tr>
    <tr v-for="row in rows">
      <td v-for="column in columns">
        {{row[column]}}
      </td>
    </tr>
  </table>
</div>

JavaScript

var i = 0;

new Vue({
  el: '#app',
  data: {
    input: "",
    columns: ["Certification Number", "Hologram Security (Y/N)", "Reverse Cert Number/Barcode (Y/N)", "Year", "Brand", "Variety", "Sport", "Sport Category", "Card #", "Player Name", "Grade", "Grade extrapolate (1)", "Grade extrapolate (2)", "Grade Extrapolate (3)", "Population ( Placed into Item Information if value<25)", "Population /w Qual", "Population Higher"],
    rows: []
  },
  methods: {
    tryAdd: function() {
      while(this.input.length >= 8) {
        this.rows.push(rand.call(this));
        this.input = this.input.substr(8);
      }

      function rand() {
        var ret = {};
        this.columns.forEach(function(column) {
          ret[column] = "dummy data " + (i++);
        })
        return ret;
      }
    },
    download: function() {
      var data = this.columns.join(",") + "\n";
      this.rows.forEach(function(row) {
        data += Object.keys(row).map(function(k) {
          return row[k];
        }).join(",") + "\n";
      });

      var blob = new Blob([data], {
        type: 'text/csv'
      });

      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "data.csv";
      link.click();
    }
  }
})