JSFiddle - React, Tailwind, and code Playground

by Sergio Crisostomo

HTML

<script src="//vuejs.org/js/vue.min.js"></script>
<div id="app">
  <download-excel class="btn btn-default" :data="data.resultado" :fields="json_fields" :meta="json_meta" name="filename.xls" style="margin-bottom: 10px;">
  </download-excel>
</div>

JavaScript

const data = {
  titulos: ['Data Emissão', 'Data Saída', 'CAMPO 3', 'CAMPO 4'],
  resultado: [
    ['Carta Correção', 'Não', 'Não ', '09/08/2017 17:56'],
    ['Solicita Alteração', 'Não', 'Não ', '09/08/2017 17:56'],
    ['UM', 464752, 'UM ', '09/08/2017 17:56'],
    ['UM', 464752, 'UM ', '09/08/2017 17:56']
  ]
};

Vue.component('download-excel', {
  template: `
	<a
		href="#"
		:id="id_name"
		@click="generate_excel">
		<slot>
			{{button_text}}
		</slot>
	</a>
`,
  data: function() {
    return {
      animate: true,
      animation: ''
    };
  },
  props: {
    button_text: {
      type: String,
      default: 'Download Excel'
    },
    data: {
      type: Array,
      required: true
    },
    fields: {
      type: Object,
      required: true
    },
    name: {
      type: String,
      default: 'data.xls'
    },
    meta: {
      type: Array,
      default: []
    }
  },
  created: function() {},
  computed: {
    id_name: function() {
      var now = new Date().getTime();
      return 'export_' + now;
    }
  },
  methods: {
    emitXmlHeader: function() {
      var headerRow = '<tr>\n';
      for (var colName in this.fields) {
        headerRow += '  <th>\n';
        headerRow += colName + '\n';
        headerRow += '  </th>\n';
      }
      headerRow += '</tr>\n';
      var metatags = this.meta.reduce(function(string, element) {
        var tags = element
          .map(function(m) {
            return '<meta ' + m.key + '="' + m.value + '"' + '/>';
          })
          .join('');
        return string + tags;
      }, '');
      return (
        '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head>' +
        metatags +
        '<!--[if gte mso...