How to set the content of first row as headers? - sheetjs

Question

How to set the content of first row as headers ?
<template>
<v-container>
<div #drop="_drop" #dragenter="_suppress" #dragover="_suppress">
<input
type="file"
class="form-control"
id="file"
:accept="SheetJSFT"
#change="_change"
/>
<v-btn :disabled="data.length ? false : true" #click="_export">
Export
</v-btn>
<table class="table table-striped">
<thead>
<tr>
<th v-for="c in cols" :key="c.key">{{ c.name }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(r, key) in data" :key="key">
<td v-for="c in cols" :key="c.key">{{ r[c.key] }}</td>
</tr>
</tbody>
</table>
</div>
</v-container>
</template>
<script>
import XLSX from 'xlsx'
const make_cols = (refstr) =>
Array(XLSX.utils.decode_range(refstr).e.c + 1)
.fill(0)
.map((x, i) => ({ name: XLSX.utils.encode_col(i), key: i }))
const _SheetJSFT = [
'xlsx',
'xlsb',
'xlsm',
'xls',
'xml',
'csv',
'txt',
'ods',
'fods',
'uos',
'sylk',
'dif',
'dbf',
'prn',
'qpw',
'123',
'wb*',
'wq*',
'html',
'htm',
]
.map(function (x) {
return '.' + x
})
.join(',')
export default {
data() {
return {
data: ['SheetJS'.split(''), '1234567'.split('')],
cols: [
{ name: 'A', key: 0 },
{ name: 'B', key: 1 },
{ name: 'C', key: 2 },
{ name: 'D', key: 3 },
{ name: 'E', key: 4 },
{ name: 'F', key: 5 },
{ name: 'G', key: 6 },
],
SheetJSFT: '.xlsx',
}
},
methods: {
_suppress(evt) {
evt.stopPropagation()
evt.preventDefault()
},
_drop(evt) {
evt.stopPropagation()
evt.preventDefault()
const files = evt.dataTransfer.files
if (files && files[0]) this._file(files[0])
},
_change(evt) {
const files = evt.target.files
if (files && files[0]) this._file(files[0])
},
_export(evt) {
/* convert state to workbook */
const ws = XLSX.utils.aoa_to_sheet(this.data)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
/* generate file and send to client */
XLSX.writeFile(wb, 'sheetjs.xlsx')
},
_file(file) {
/* Boilerplate to set up FileReader */
const reader = new FileReader()
reader.onload = (e) => {
/* Parse data */
const ab = e.target.result
const wb = XLSX.read(new Uint8Array(ab), { type: 'array' })
/* Get first worksheet */
const wsname = wb.SheetNames[0]
const ws = wb.Sheets[wsname]
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_json(ws, { header: 1, range: 1 })
/* Update state */
const data = XLSX.utils.sheet_to_json(ws, { header: 1 })
/* Update state */
this.data = data
this.cols = make_cols(ws['!ref'])
}
reader.readAsArrayBuffer(file)
},
},
}
</script>