SpreadJS 14
SpreadJS Designer Components / JavaScript Frameworks / Vue
In This Topic
    Vue
    In This Topic

    You can perform the following steps to add SpreadJS Designer in an Vue application:

    1. Add the following required packages in the package.json file.
      Javascripts
      Copy Code
      @grapecity/spread-excelio
      @grapecity/spread-sheets
      @grapecity/spread-sheets-barcode
      @grapecity/spread-sheets-charts
      @grapecity/spread-sheets-languagepackages
      @grapecity/spread-sheets-pdf
      @grapecity/spread-sheets-print
      @grapecity/spread-sheets-resources-ja
      @grapecity/spread-sheets-shapes
      @grapecity/spread-sheets-pivot-addon
      @grapecity/spread-sheets-designer
      @grapecity/spread-sheets-designer-resources-en
      @grapecity/spread-sheets-designer-vue
      

    2. Now, you can import the required modules using the following code snippet.
      Javascripts
      Copy Code
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
      import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
      import { Designer } from '@grapecity/spread-sheets-designer-vue';
      import '@grapecity/spread-sheets-designer-resources-en';
      

    3. Next, you have to add designer tag into the template using the following code snippet.
      Javascripts
      Copy Code
      <template>
        <div id="app">
          <gc-spread-sheets-designer
          :styleInfo='styleInfo'
          :config='config'>
          </gc-spread-sheets-designer>
        </div>
      </template>
      

    4. Add designer tag in the component.html file using the following code snippet.
      Javascripts
      Copy Code
      <designer [props]="props"></designer>
      

    Apply License

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

    JavaScript
    Copy Code
    import '@grapecity/spread-sheets-designer-resources-en'
    import * as GC from '@grapecity/spread-sheets'
    import '@grapecity/spread-sheets-designer'
     
    GC.Spread.Sheets.LicenseKey = ‘sjs-distribution-key'
    GC.Spread.Sheets.Designer.LicenseKey = ‘designer-component-distribution-key’