# JS to XLSX Components

# xlsx-workbook

This is the basic export component it's responsible for creating a new basic workbook and handling it

# Props

xlsx-workbook does not have any props

# Events

Name	Payload	Description
created	workbook	emit the newly created workbook
change	workbook	emit the updated workbook

# Example

<template>
  <div>
    <xlsx-workbook @change="onChange" @created="onCreated"/>
  </div>
</template>

<script>
import { XlsxWorkbook } from "../../dist/vue3-xlsx.cjs.prod.js";

export default {
  components: {
    XlsxWorkbook,
  },
  data() {
    return {};
  },
  methods: {
    onCreated (wb) {
      console.log(wb)
    },
    onChange(wb) {
     console.log(wb)
    }
  }
};
</script>

# xlsx-sheet

xlsx-sheet is meant to be a child of xlsx-workbook it creates a new sheet inside it and maintain it updated

WARNING

xlsx-sheet and xlsx-sheets are two distinct components with completely separated functionalities

# Props

Name	Type	Default	Description
sheetName	`String`	`null`	sheet name, this property is required
collection	`Array`	`null`	An `Array` of `Array` OR an `Array` of `Object` containing the data to add to the spreadsheet

# Events

Name	Payload	Description
parsed	sheet	emit the newly created sheet

# Example

<template>
  <div>
      <div>
        <input v-model="sheetName" placeholder="type a new sheet name" />
        <button v-if="sheetName" @click="addSheet">Add Sheet</button>
      </div>
      <div>Sheets: {{ sheets }}</div>
      <xlsx-workbook>
        <xlsx-sheet
          :collection="sheet.data"
          v-for="sheet in sheets"
          :key="sheet.name"
          :sheet-name="sheet.name"
          @parsed="onParsed"
        />
      </xlsx-workbook>
    </section>
  </div>
</template>

<script>
import { XlsxWorkbook, XlsxSheet } from "../../dist/vue3-xlsx.cjs.prod.js";

export default {
  components: {
    XlsxWorkbook,
    XlsxSheet
  },
  data() {
    return {
      sheetName: null,
      sheets: [{ name: "SheetOne", data: [{ c: 2 }] }],
      collection: [{ a: 1, b: 2 }]
    };
  },
  methods: {
    addSheet() {
      this.sheets.push({ name: this.sheetName, data: [...this.collection] });
      this.sheetName = null;
    },
    onParsed (sheet) {
      console.log(sheet)
    }
  }
};
</script>

# Try It!

Sheets: [ { "name": "SheetOne", "data": [ { "c": 2 } ] } ]

# xlsx-download

xlsx-download is meant to be a child of xlsx-workbook it accepts a slot and trigger a workbook download when the content of the slot is clicked

# Props

Name	Type	Default	Description
filename	`String`	`"my-workbook.xlsx`	the name of the downloaded file
options	`Object`	`{}`	options object to pass to the file writing function
disableWrapperClick	`Boolean`	`false`	disable listening to click on the wrapper of the slot, use the slot-scope `download` function instead

# Events

xlsx-download does not have any events

# Scoped Slots

# Default

Name	Value	Description
download	`Function`	function to call to trigger the download of the workbook

# Example

<template>
  <div>
    <div>
      <input v-model="sheetName" placeholder="type a new sheet name" />
      <button v-if="sheetName" @click="addSheet">Add Sheet</button>
    </div>

    <div>Sheets: {{ sheets }}</div>

    <xlsx-workbook>
      <xlsx-sheet
        :collection="sheet.data"
        v-for="sheet in sheets"
        :key="sheet.name"
        :sheet-name="sheet.name"
      />
      <xlsx-download>
        <button>Download</button>
      </xlsx-download>
      <xlsx-download disable-wrapper-click>
        <template #default="{download}">
          <button  @click="download">Download with slot scope</button>
        </template>
      </xlsx-download>
    </xlsx-workbook>
  </div>
</template>

<script>
import { XlsxWorkbook, XlsxSheet, XlsxDownload } from "../../dist/vue3-xlsx.cjs.prod.js";

export default {
  components: {
    XlsxWorkbook,
    XlsxSheet,
    XlsxDownload
  },
  data() {
    return {
      sheetName: null,
      sheets: [{ name: "SheetOne", data: [{ c: 2 }] }],
      collection: [{ a: 1, b: 2 }],
    };
  },
  methods: {
    addSheet() {
      this.sheets.push({ name: this.sheetName, data: [...this.collection] });
      this.sheetName = null;
    }
  }
};
</script>

# Try It!

Sheets: [ { "name": "SheetOne", "data": [ { "c": 2 } ] } ]