Excel IO Element

Using the Excel IO element in SpreadJS with Vue, you can quickly render and display the Excel sheets on the web pages while also executing the import and export operations without any hassle.

Vue 3

Create a Vue project
Open the command prompt and type the following commands to create a simple Vue project.
```
npm install -g @vue-cli
vue create sjs-vue-app :: Here, select Vue 3
cd sjs-vue-app
npm run serve
```
Import SpreadJS Vue modules in project
Import SpreadJS Vue modules in your project using the following command:
```
npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets
```
Import Excel IO Vue Module and FileSaver Vue Module in the project
Import the Excel I/O and file-saver modules in your project using the following commands:
```
npm install @grapecity/spread-excelio
npm install file-saver --save
```

Use Excel IO in Vue Application

Modify the App.vue file to use the Excel IO element in a Vue application as shown below:

<template>
  <div>
    <gc-spread-sheets class="spread-host" @workbookInitialized="initSpread">
    </gc-spread-sheets>
    <div class="options-container">
      <div class="option-row">
        <div class="inputContainer">
          <input
            type="file"
            id="fileDemo"
            class="input"
            @change="changeFileDemo"
          />
          <input
            type="button"
            id="loadExcel"
            value="import"
            class="button"
            @click="loadExcel"
          />
        </div>
        <div class="inputContainer">
          <input
            id="exportFileName"
            value="export.xlsx"
            class="input"
            @change="changeExportFileName"
          />
          <input
            type="button"
            id="saveExcel"
            value="export"
            class="button"
            @click="saveExcel"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
  import * as GC from "@grapecity/spread-sheets";
  import * as ExcelIO from "@grapecity/spread-excelio";
  import { saveAs } from "file-saver";

  var SpreadJSKey = "xxxx";
  GC.Spread.Sheets.LicenseKey = SpreadJSKey;

  // You need to license the ExcelIO module separately using the same license key
  ExcelIO.LicenseKey = SpreadJSKey;

  export default {
    name: "App",
    methods: {
      initSpread: function (spread) {
        this.spread = spread;
        let sheet = this.spread.getActiveSheet();
        sheet
          .getCell(0, 0)
          .vAlign(GC.Spread.Sheets.VerticalAlign.center)
          .value("SpreadJS");
      },
      changeFileDemo(e) {
        this.importExcelFile = e.target.files[0];
      },
      changeExportFileName(e) {
        this.exportFileName = e.target.value;
      },
      loadExcel() {
        let spread = this.spread;
        let excelIo = new ExcelIO.IO();
        let excelFile = this.importExcelFile;
        excelIo.open(
          excelFile,
          function (json) {
            spread.fromJSON(json);
          },
          function (error) {
            console.log(error);
          }
        );
      },
      saveExcel() {
        let spread = this.spread;
        let excelIo = new ExcelIO.IO();
        let fileName = this.exportFileName || "export";
        if (fileName.substr(-5, 5) !== ".xlsx") {
          fileName += ".xlsx";
        }
        let json = spread.toJSON();
        excelIo.save(
          json,
          function (blob) {
            saveAs(blob, fileName);
          },
          function (error) {
            console.log(error);
          }
        );
      },
    },
  };
</script>

<style>
  .spread-host {
    width: 100%;
    height: 600px;
  }
  .inputContainer {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    padding: 6px 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .options-container {
    width: 280px;
    padding: 12px;
    height: 100%;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
  }
</style>

Register the SpreadJS Vue Component

Modify the main.js file by using the sample code given below:

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'

let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount("#app");

Save and Run the Application
Build and run the new project using the following command:
```
npm run serve
```