# Excel IO Element

## Content

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

1. **Create a Vue project**
    Open the command prompt and type the following commands to create a simple Vue project.

    ```Shell
    npm install -g @vue-cli
    vue create sjs-vue-app :: Here, select Vue 3
    cd sjs-vue-app
    npm run serve
    ```
2. **Import SpreadJS Vue modules in project**
    Import SpreadJS Vue modules in your project using the following command:

    ```Shell
    npm install @mescius/spread-sheets-vue
    npm install @mescius/spread-sheets
    ```
3. **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:

    ```Shell
    npm install @mescius/spread-excelio
    npm install file-saver --save
    ```
4. **Use Excel IO in Vue Application**
    Modify the App.vue file to use the Excel IO element in a Vue application as shown below:

    ```HTML
    <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 "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
      import * as GC from "@mescius/spread-sheets";
      import * as ExcelIO from "@mescius/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>
    ```
5. **Register the SpreadJS Vue Component**
    Modify the main.js file by using the sample code given below:

    ```JavaScript
    import { createApp } from 'vue'
    import App from './App.vue'
    import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/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");
    ```
6. **Save and Run the Application**
    Build and run the new project using the following command:

    ```Shell
    npm run serve
    ```