[]
        
(Showing Draft Content)

Vue

You can perform the following steps to add the SpreadJS Designer Component to a Vue application:

Vue 3

  1. Create a Vue project by typing the following command in Command Prompt.

    npm init vue@latest

    The command will present prompts for the project name and other optional features that can be added to the Vue project.

  2. Import the following SpreadJS and SpreadJS Designer Vue modules in the project.

    npm install @grapecity/spread-sheets-designer
    npm install @grapecity/spread-sheets-designer-resources-en
    npm install @grapecity/spread-sheets-designer-vue
    npm install @grapecity/spread-sheets
    npm install @grapecity/spread-excelio
    npm install @grapecity/spread-sheets-barcode
    npm install @grapecity/spread-sheets-charts
    npm install @grapecity/spread-sheets-languagepackages
    npm install @grapecity/spread-sheets-print
    npm install @grapecity/spread-sheets-pdf
    npm install @grapecity/spread-sheets-shapes
    npm install @grapecity/spread-sheets-pivot-addon
    npm install @grapecity/spread-sheets-tablesheet
  3. Register SpreadJS Designer Vue Component to the application in the main.js file.

    import { createApp } from 'vue'
    import App from './App.vue'
    import Designer from "@grapecity/spread-sheets-designer-vue"
    let app = createApp(App);
    app.component("gc-spread-sheets-designer", Designer);
    app.mount('#app');
  4. Add the SpreadJS Designer Vue Component to the application by modifying the App.vue file.

    <script setup>
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
    import * as GC from "@grapecity/spread-sheets";
    import "@grapecity/spread-sheets-print";
    import "@grapecity/spread-sheets-shapes";
    import "@grapecity/spread-sheets-pivot-addon";
    import "@grapecity/spread-sheets-tablesheet";
    import "@grapecity/spread-sheets-designer-resources-en";
    import "@grapecity/spread-sheets-designer";
    </script>
    <script>
    export default {
      name: "App",
      data: function () {
        return {
          styleInfo: { height: "98vh", width: "100%" },
          config: config,
          spreadOptions: {
            sheetCount: 2,
          },
          designer: null,
        };
      },
      methods: {
        designerInitialized(value) {
          this.designer = value;
        },
      },
    };
    </script>
    <template>
      <div id="gc-designer-container">
        <gc-spread-sheets-designer
          :styleInfo="styleInfo"
          :config="config"
          :spreadOptions="spreadOptions"
          @designerInitialized="designerInitialized"/>
      </div>
    </template>
    <style>
    </style>
  5. Run the application.

    npm run dev

Vue 2

  1. Create a Vue project by typing the following commands in Command Prompt.

    npm install -g @vue/cli
    npm i -g @vue/cli-init
    vue init webpack designercomponent
    cd designercomponent
    npm run dev
  2. Import the following SpreadJS Vue modules in the project.

    npm install @grapecity/spread-excelio
    npm install @grapecity/spread-sheets
    npm install @grapecity/spread-sheets-barcode
    npm install @grapecity/spread-sheets-charts
    npm install @grapecity/spread-sheets-languagepackages
    npm install @grapecity/spread-sheets-pdf
    npm install @grapecity/spread-sheets-print
    npm install @grapecity/spread-sheets-shapes
    npm install @grapecity/spread-sheets-tablesheet
    npm install @grapecity/spread-sheets-pivot-addon
    npm install @grapecity/spread-sheets-designer
    npm install @grapecity/spread-sheets-designer-resources-en
    npm install @grapecity/spread-sheets-vue
    npm install @grapecity/spread-sheets-designer-vue
  3. Import the required modules and add the designer tag into the template using the following code snippet in App.vue.

    <!--Add designer tag into the template-->
    <template>
      <div id="app">
        <gc-spread-sheets-designer :styleInfo='styleInfo'
                                   :config='config'
                                   @designerInitialized="designerInitialized">
        </gc-spread-sheets-designer>
      </div>
    </template>
    <script>
    // import the required modules
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
    import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
    import '@grapecity/spread-sheets-designer-resources-en'
    import '@grapecity/spread-sheets-designer-vue'
    export default {
      name: 'App',
      data: function () {
        return {
          styleInfo: { height: '800px', width: '1200px', border: 'solid black 1px' },
          config: null,
          designer: null
        }
      },
      methods: {
        designerInitialized (value) {
          this.designer = value
        }
      }
    }
    </script>
  4. Run the application.

    npm run dev

Apply License

The licensed version allows you to use all features of the SpreadJS Designer Component. You need to set the license key for SpreadJS, ExcelIO, and the Designer Component which can be done by using the following code snippet.

import '@grapecity/spread-sheets-designer-resources-en'
import { Designer } from '@grapecity/spread-sheets-designer-vue'
import * as GC from '@grapecity/spread-sheets'
import * as ExcelIO from '@grapecity/spread-excelio'
// license keys
var sjsLicense = 'sjs-distribution-key'
GC.Spread.Sheets.LicenseKey = sjsLicense
ExcelIO.LicenseKey = sjsLicense
GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key'