Accents problem in Vue-json-excel

Asked

Viewed 446 times

1

I’m using the 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).

Until then, everything works perfectly, however, I had problems with accents. Example, the 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"
                    }]
                ]
            }
        },

The data is coming from the database, and on the screen, are displayed correctly.

That way, I do to insert the data from my database into one 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"
      ]
   ]
}
javascript json vue.js

2 answers

3


  • I had tested, tested every way, then opened the file of node_modules/... and compared it to the file on github of them, and saw that he was not receiving the prop meta. Ai managed to solve the way up. But thanks Sergio, Oce always helps me ;)

  • @Rafaelaugusto I used your integral code, I just added the - in utf8:)

  • 1

    @Rafaelaugusto finally sent a suggestion :) https://github.com/jecovier/vue-json-excel/pull/10

  • can you tell me why erro when I try to export a table with lots of data? if I do with few, normal low, if mine json has a lot of data, is downloading (but never low, nor starts or shows in the downloads, but if you try to close the browser, says that has a download in progress).

  • @Rafaelaugusto I have no idea. Maybe there is some character in the data that makes the program stop.

  • Strange because it is only with good amount of record, but I will give a analyzed, then back to leave feedback. Hugs

Show 1 more comment

0

After a lot of work (not so much) I discovered the mistake and will leave here for those who go through the same as me. The modulo owns the :meta to receive the parameters, however, when you install the modulo, ex: npm install --save vue-json-excel and looks at the source code, Voce sees 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>

Browser other questions tagged javascript json vue.js

You are not signed in. Login or sign up in order to post.