Problem with accents in vue-json-excel

Navigation
1

I'm using vue-json-excel to export an Excel spreadsheet (I have the table on my screen and use it to export the same data to excel).

So far, everything works perfectly, however, I had problems with accentuations. Example, não , appears Não , and so on. 

    <download-excel
        class   = "btn btn-default"
        :data   = "data.resultado"
        :fields = "json_fields"
        :meta   = "json_meta"
        name    = "filename.xls" style="margin-bottom: 10px;">
    </download-excel>

JS 

data(){
            return{
                data: {},
                filterTerm: '',
                json_fields : {},
                json_data: [],
                json_meta: [
                    [{
                        "key": "charset",
                        "value": "utf8"
                    }]
                ]
            }
        },

Data is coming from the database, and the screen is displayed correctly.

In this way, I do to insert the data of my bank into a objeto 

for(let i = 0; i < this.data.titulos.length; i++){
                        this.json_fields[this.data.titulos[i]] = "String"
                    }

JSON RETURN 

{
   "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"
      ]
   ]
}
    
asked by anonymous 27.09.2017 / 20:59

2 answers

3

Your problem seems to me to be just a typo.

Mute 

"value": "utf8"

for 

"value": "utf-8"

jsFiddle : link

    
27.09.2017 / 22:10
0

After a lot of work (not so much) I discovered the error and I'll leave it here for those who pass by the same as me. The modulo has :meta to receive the parameters, however, when you install modulo , ex: npm install --save vue-json-excel and look at the source code, you see that it does not receive the parameters. And for this, a simple solution is ... 

<template>
    <a
        href="#"
        :id="id_name"
        @click="generate_excel">
        <slot>
            {{button_text}}
        </slot>
    </a>
</template>

<script>
export default {
    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 = null;
            this.meta.forEach(function(element) {
                metatags += '<meta '
                element.forEach(function(m) {
                    metatags += m.key+'="'+m.value+'" ';
                });
                metatags += '>';
            });
            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 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Data</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>\n' +
                   '<thead>\n\n' +
                   headerRow+
                   '</thead>\n\n'+
                   '</tbody>\n';
        },
        emitXmlFooter: function() {
            return '\n</tbody>\n' +
                    '</table>\n'+
                    '</body>\n'+
                   '</html>\n';
        },
        jsonToHtml: function (jsonObject) {
            var row;
            var col;
            var xml;
            // console.log(jsonObject);
            var data = typeof jsonObject != "object"
                     ? JSON.parse(jsonObject)
                     : jsonObject;
            xml = this.emitXmlHeader();
            for (row = 0; row < data.length; row++) {
                xml += '<tr>\n';
                for (col in data[row]) {
                    xml += '  <td>\n';
                    xml += String(data[row][col])+ '\n';
                    xml += '  </td>\n';
                }
                xml += '</tr>\n';
            }
            xml += this.emitXmlFooter();
            return xml;
        },
        generate_excel: function (){
            var uri = 'data:application/vnd.ms-excel;base64,'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            var a = document.getElementById(this.id_name);
            a.href = uri + base64(this.jsonToHtml(this.data));
            a.download = this.name;
        }
    }
}
</script>
    
27.09.2017 / 21:56
How to use LIKE with OR in Oracle? My notifications are not coming and I think my code may be correct