# 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/vue3-xlsx.cjs.prod.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/vue3-xlsx.cjs.prod.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/vue3-xlsx.cjs.prod.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/vue3-xlsx.cjs.prod.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>