Spread-sheets-io Element

Using the spread-sheets-io element in SpreadJS with Vue, you can quickly render and display the Excel sheets on the web pages while 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
```
Import SpreadJS Vue modules in project
Import SpreadJS Vue modules in your project using the following command:
```
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```
Import spread-sheets-io Vue Module and FileSaver Vue Module in the project
Import the spread-sheets-io and file-saver modules in your project using the following commands:
```
npm install @mescius/spread-sheets-io
npm install file-saver --save
```

Use spread-sheets-io in Vue Application

Modify the App.vue file to use the spread-sheets-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 "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    import * as GC from "@mescius/spread-sheets";
    import "@mescius/spread-sheets-vue";
    import saveAs from "file-saver";
    import "@mescius/spread-sheets-io";

    export default {
        name: "App",
        setup() {
            const hostClass = "spread-host";

            function initWorkbook(spread) {
                let sheet = spread.getActiveSheet();
                sheet.setValue(0, 0, "Hello Grapecity");

                const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };

                function getFileType(fileName) {
                    // console.log( fileName);
                    return fileName.split(".").pop();
                }

                // Load Files
                function loadFile(file) {
                    const type = getFileType(file.name);
                    const fileType =
                        type === "xlsx"
                            ? GC.Spread.Sheets.FileType.excel
                            : GC.Spread.Sheets.FileType.ssjson;

                    if (type === fileTypeMap.sjs) {
                        spread.open(
                            file,
                            () => console.log("SJS File Loaded"),
                            console.error
                        );
                    } else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
                        spread.import(file, () => console.log("File Loaded"), console.error, {
                            fileType,
                        });
                    } else {
                        console.error("Unsupported file type");
                    }
                }

                // Export Files
                function exportFile() {
                    const type = document.getElementById("exportFileType").value;
                    const fileName = `export.${type}`;
                    const fileType =
                        type === "xlsx"
                            ? GC.Spread.Sheets.FileType.excel
                            : GC.Spread.Sheets.FileType.ssjson;

                    if (type === fileTypeMap.sjs) {
                        spread.save((blob) => saveAs(blob, fileName), console.error);
                    } else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
                        spread.export((blob) => saveAs(blob, fileName), console.error, {
                            fileType,
                        });
                    }
                }

                document
                    .getElementById("selectedFile")
                    .addEventListener("change", (e) => loadFile(e.target.files[0]));
                document
                    .getElementById("exportBtn")
                    .addEventListener("click", exportFile);
            }

            return {
                hostClass,
                initWorkbook,
            };
        },
    };
</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 '@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");

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

Vue 3