vue.jsquasar-frameworkfilesaver.js

Problems with formatting data coming from the html table to the xlsx file in filesaver.js - VueJs


I'm using the Filesaver.js library to export an .xlsx file from a table I own. But I am getting some errors. See below:

Original table created using VueJs with Quasar Framework:

enter image description here

Generated .xlsx file:

enter image description here

Another case

enter image description here

Generated .xlsx file:

enter image description here

My code:

exportTable() {
    let wb = XLSX.utils.table_to_book(document.querySelector('.q-table'), {
      sheet: "Sheet JS",
    })
    let wbout = XLSX.write(wb, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'binary'
    })

    function s2ab(s) {
      let buf = new ArrayBuffer(s.length)
      let view = new Uint8Array(buf)
      for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF
      return buf
    }

    saveAs(new Blob([s2ab(wbout)], {
      type: "text/plain;charset=utf-8"
    }), 'test.xlsx')

Why is the format of the characters in the table not being kept when exporting the spreadsheet ?

Is my spreadsheet data not treated as a string?

I'm brazilian. Sorry for bad English (=


Solution

  • After a few days of looking for answers, I managed to solve my problem. More precisely, just use {raw: true}. By doing this, the lib no longer formats the data, leaving it in the raw form that comes from HTML. Interestingly, I didn't find this in the documentation.

    // import something here
    import Vue from 'vue'
    import XLSX from 'xlsx'
    import {
      saveAs
    } from 'file-saver'
    
    
    // Global Function
    
    const exportExcel = (table) => {
    
      let wb = XLSX.utils.table_to_book(table, {
        sheet: "Sheet JS",
        raw: true // Here
      })
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'binary'
      })
    
      function s2ab(s) {
    
        let buf = new ArrayBuffer(s.length)
        let view = new Uint8Array(buf)
        for (let i = 0; i != s.length; i++) view[i] = s.charCodeAt(i) & 0xFF
        return buf
      }
    
      saveAs(new Blob([s2ab(wbout)], {
        type: "text/plain;charset=utf-8"
      }), 'spreadsheet.xlsx')
    }
    
    Vue.prototype.$exportExcel = exportExcel;
    
    // "async" is optional;
    // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
    //export default exportExcel

    This link helped me