[]
        
(Showing Draft Content)

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

  1. 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
  2. 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
  3. 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
  4. 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>
  5. 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");
  6. Save and Run the Application

    Build and run the new project using the following command:

    npm run serve