XLSX to JS Components
xlsx-read
This is the basic import component it gets an xlsx file and converts it in a js worksheet.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| file | File | null | the file to parse from |
| options | Object | {} | options object to pass to the parse function |
Events
| Name | Payload | Description |
|---|---|---|
| parsed | workbook | emit the processed workbook when ready |
| loading | loading | emit at the start and end of the parsing process |
Scoped Slots
Default
| Name | Value | Description |
|---|---|---|
| loading | Boolean | loading state |
Example
<template>
<div>
<h3>Import XLSX</h3>
<input type="file" @change="onChange" />
<xlsx-read :file="file" >
<template #default="{loading}">
<span v-if="loading">Loading...</span>
</template>
</xlsx-read>
</div>
</template>
<script>
import { XlsxRead } from "../../dist/vue-xlsx.es.js"
export default {
components: {
XlsxRead
},
data() {
return {
file: null
};
},
methods: {
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
}
}
};
</script>
Try It!
Import XLSX
xlsx-table
xlsx-table is meant to be a child of xlsx-read it automatically detect when a new xlsx file is converted to a workbook and print in the DOM as an HTML table
Props
| Name | Type | Default | Description |
|---|---|---|---|
| sheet | [String, Number] | 0 | the sheet number or name to print in the DOM |
| options | Object | {} | options object to pass to the conversion function |
Events
xlsx-table does not emit any event
Example
<template>
<div>
<h3>Import XLSX</h3>
<input type="file" @change="onChange" />
<xlsx-read :file="file">
<xlsx-table />
</xlsx-read>
</div>
</template>
<script>
import { XlsxRead, XlsxTable } from "../../dist/vue-xlsx.es.js"
export default {
components: {
XlsxRead,
XlsxTable
},
data() {
return {
file: null
};
},
methods: {
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
}
}
};
</script>
Try It!
Import XLSX
xlsx-json
xlsx-json is meant to be a child of xlsx-read it automatically detect when a new xlsx file is converted to a workbook and emits a js object representation of the selected sheet, it also exposes the js object to his first slot trough scopes
Props
| Name | Type | Default | Description |
|---|---|---|---|
| sheet | [String, Number] | 0 | the sheet number or name to parse |
| options | Object | {} | options object to pass to the conversion function |
Events
| Name | Payload | Description |
|---|---|---|
| parsed | Array | emit the array of objects representing the selected sheet |
Scoped Slots
Default
| Name | Value | Description |
|---|---|---|
| collection | Array | array of objects representing the selected sheet |
Example
<template>
<div>
<h3>Import XLSX</h3>
<input type="file" @change="onChange" />
<xlsx-read :file="file">
<xlsx-json>
<template #default="{collection}">
<div>
{{ collection }}
</div>
</template>
</xlsx-json>
</xlsx-read>
</div>
</template>
<script>
import { XlsxRead, XlsxJson } from "../../dist/vue-xlsx.es.js"
export default {
components: {
XlsxRead,
XlsxJson
},
data() {
return {
file: null
};
},
methods: {
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
}
}
};
</script>
Try It!
Import XLSX
xlsx-sheets
xlsx-sheets is meant to be a child of xlsx-read it automatically detect when a new xlsx file is converted to a workbook and parse the available sheets
Props
xlsx-sheets does not have any props
Events
| Name | Payload | Description |
|---|---|---|
| parsed | Array | emit the array of Strings containing the name of the sheets |
Scoped Slots
Default
| Name | Value | Description |
|---|---|---|
| sheets | Array | array of Strings containing the name of the sheets |
Example
<template>
<div>
<input type="file" @change="onChange" />
<xlsx-read :file="file">
<xlsx-sheets>
<template #default="{sheets}">
<select v-model="selectedSheet">
<option v-for="sheet in sheets" :key="sheet" :value="sheet">
{{ sheet }}
</option>
</select>
</template>
</xlsx-sheets>
</xlsx-read>
</div>
</template>
<script>
import { XlsxRead, XlsxSheets } from "../../dist/vue-xlsx.es.js"
export default {
components: {
XlsxRead,
XlsxSheets,
},
data() {
return {
file: null,
selectedSheet: null
};
},
methods: {
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
}
}
};
</script>