Exportando a Excel desde un object con VueJS

Preámbulo: Apunto a una API REST y me devuelve un objeto con X datos, con los cuales creo una tabla con búsqueda, filtro, etc.

Era yo feliz creando una nueva interfaz en VueJS cuando decidimos permitir que el usuario exporte los datos de una tabla a Excel.

OK querido bak, te mando los datos a un endpoint y que se descargue el .xls

Si claro, pinche frón.

No había tiempo para programar eso. Tenía que hacerlo directo en el frontend. Había jugado antes con algunas libs pero nada efectivo; me puse a volver a revisar soluciones existentes y tras algunos fracasos, di con lo siguiente a través de la librería SheetJS js-xlsx:

import XLSX from ‘xlsx’
export default {
  name: 'AnyComponentName',
  data () {
    return {
      dataToExport: [
        {
          name: 'Jorge',
          occupation: 'Best Admin'
        },
        {
          name: 'Héctor',
          occupation: 'Worst Admin'
        },
        {
          name: 'gmq',
          occupation: ':shrug:'
        }
      ]
    }
  },
  methods: {
    exportExcel: function () {
      let data = XLSX.utils.json_to_sheet(this.dataToExport)
      const workbook = XLSX.utils.book_new()
      const filename = 'devschile-admins'
      XLSX.utils.book_append_sheet(workbook, data, filename)
      XLSX.writeFile(workbook, `${filename}.xlsx`)
    }
  }
}

Ver ejemplo funcionando en JSBin.

Un disclaimer: los datos que estoy utilizando con esta solución son soportables por el browser (en la tabla, alrededor de 100 filas y 5 columnas), claramente si tu fuente de datos es grande tendrás que ver una solución desde el servidor.

Disclaimer 2: tengo una fuente de datos con 500 registros, 7 columnas. Sin problemas en menos de 1s hace el export pesa 93kb. Smooooooth!

Lo bonito de esta librería es que viene con buenos ejemplos para varios sabores de librerías y frameworks actuales y permite además de lo simple del ejemplo mostrado, crear múltiples sheets, darles nombres a ellas, a las columnas, y un largo etc.

Hay más de donde salió eso. Cheka el repo.

🍻 ¡Salud! 🍻

—

Update 1:

Pinches usuarios me pidieron que los encabezados de cada columna del Excel exportado viniera en español y no en el críptico key del objeto:

[‘transaction_date’, ‘business_name’, ‘credit’, ‘rate’, …]

Para cambiar el valor de alguna celda:

let data = XLSX.utils.json_to_sheet(
 this.dataToExport,
 {
   header: [‘transaction_date’, ‘business_name’, ‘credit’, ‘rate’]
 }
)
data[‘A1’].v = ‘Fecha’
data[‘B1’].v = ‘Empresa solicitante’
data[‘C1’].v = ‘Depósitos’
data[‘D1’].v = ‘Tasa’
const workbook = XLSX.utils.book_new()
...

👏