Getting Started with SpreadJS Vue Component

Embed an Excel-like spreadsheet into your Vue Application by following these simple steps. Once added, you can completely customize it per your business needs.

Steps

  1. Create a Vue Application - Open the command prompt window and type the following commands to create a simple Vue project. After you finish, the Vue project will be created at the specified location in the directory. For more information on how to create a Vue project, refer to Vue Quick Start site.
    npm init vue@latest //Giving the project name: sjs-vue-app, choose the different project option.
    cd sjs-vue-app
  2. Install SpreadJS npm packages - We distribute the Vue SpreadJS Component via @mescius/spread-sheets-vue npm package. The main @mescius/spread-sheets package provides the core functionality. To install the most current version of these packages, run the following command from the application's root folder.
    npm install @mescius/spread-sheets-vue
    npm install @mescius/spread-sheets
  3. Use SpreadJS in Vue application
    Modify the main.ts 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'
    import './assets/main.css'
    
    let app = createApp(App);
    app.component('gc-spread-sheets', GcSpreadSheets);
    app.component('gc-worksheet', GcWorksheet);
    app.component('gc-column', GcColumn);
    app.mount("#app");
    Modify the App.vue file by using the sample code given below:
    <template>
      <div id="spread-host">
        <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
        </gc-spread-sheets>
      </div>
    </template>
    
    <script setup>
    import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    import * as GC from "@mescius/spread-sheets";
    function initWorkbook(spread) {
      let sheet = spread.getActiveSheet();
      sheet
        .getCell(0, 0)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .value("Hello SpreadJS");
    }
    </script>
    
    <style>
    .spreadHost {
      width: 800px;
      height: 800px;
    }
    </style>
                            

Setting Values and Formulas

Steps

  1. Use the setValue method to set the value of the cell and setFormula to make your calculations .
    function initWorkbook(spread) {
      let sheet = spread.getActiveSheet();
      //Setting Values - Text
      sheet.setValue(1, 1, "Setting Values");
      //Setting Values - Number
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23);
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "SpreadJS");
      sheet.setValue(4, 1, "Datetime");
      //Setting Values - DateTime
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
    }

Setting Style

Give your data a more valuable and appealing look by using the functions below.

Steps

  1. In this step, set the style for the sheet to make it more attractive and engaging.

    function initWorkbook(spread) {
       /initialize the spread
       let sheet = spread.getActiveSheet();
       //Setting Values - Text
       sheet.setValue(1, 1, "Setting Values");
       //Setting Values - Number 
       sheet.setValue(2, 1, "Number");
       sheet.setValue(2, 2, 23)
       sheet.setValue(3, 1, "Text");
       sheet.setValue(3, 2, "SpreadJS")
       sheet.setValue(4, 1, "Datetime");
       //Setting Values - DateTime
       sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
       //Setting style
       sheet.setColumnWidth(1, 200);
       sheet.setColumnWidth(2, 200);
       sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
       sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
       sheet.addSpan(1, 1, 1, 2);
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
         all: true
       });
       sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
         inside: true
       });
       sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }

Binding Data

Discover how you can bind your data with effortless efficiency.

Steps

  1. Use the getSheet method to get the sheet you are working with. Set the cell binding source with "new GC.Spread.Sheets.Bindings.CellBindingSource(person);". Then use the setBindingPath method to set the binding path for the specified cell in the specified sheet area. Then set the data source for the sheet using the setDataSource method.
    function initWorkbook(spread) {
       var sheet = spread.getSheet(0);
       var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
       var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
       sheet.setBindingPath(2, 2, 'name');
       sheet.setBindingPath(3, 2, 'age');
       sheet.setBindingPath(4, 2, 'gender');
       sheet.setBindingPath(5, 2, 'address.postcode');
       sheet.setDataSource(source);
    }