SpreadJS 15
JavaScript Frameworks / SpreadJS with Vue / Excel IO Element
In This Topic
    Excel IO Element
    In This Topic

    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.

    1. Create a Vue project

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

      Command Prompt
      Copy Code
      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:

      Command Prompt
      Copy Code
      npm install @grapecity/spread-sheets-vue
      npm install @grapecity/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:

      Command Prompt
      Copy Code
      npm install @grapecity/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:

      App.vue
      Copy Code
      <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>
      

    5. Register the SpreadJS Vue Component

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

      main.js
      Copy Code
      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");
      

    6. Save and Run the Application

      Build and run the new project using the following command:

      Command Prompt
      Copy Code
      npm run serve
      
    1. Create a Vue project

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

      Command Prompt
      Copy Code
      npm install -g @vue-cli
      vue create sjs-vue-app :: Here, select Vue 2
      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:

      Command Prompt
      Copy Code
      npm install @grapecity/spread-sheets-vue
      npm install @grapecity/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:

      Command Prompt
      Copy Code
      npm install @grapecity/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:

      App.vue
      Copy Code
      <template>
        <div>
          <gc-spread-sheets
            class="sample-spreadsheets"
            @workbookInitialized="initSpread"
          >
            <gc-worksheet> </gc-worksheet>
          </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 { IO } from "@grapecity/spread-excelio";
      import "@grapecity/spread-sheets-vue";
      import { saveAs } from "file-saver";
      
      var SpreadJSKey = "xxxxx";
      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",
        data() {
          return {
            hostClass: "spread-host",
          };
        },
        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 IO();
            let excelFile = this.importExcelFile;
            excelIo.open(
              excelFile,
              function (json) {
                spread.fromJSON(json);
              },
              function (error) {
                // process error
                alert(error.errorMessage);
              }
            );
          },
          saveExcel() {
            let spread = this.spread;
            let excelIo = new 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) {
                // process error
                console.log(error);
              }
            );
          },
        },
      };
      </script>
       
      <style>
        .sample-spreadsheets {
          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. Save and Run the Application

      Build and run the new project using the following command:

      Command Prompt
      Copy Code
      npm run serve