[]
        
(Showing Draft Content)

SpreadJS with Vue

SpreadJS supports Vue - a JavaScript framework that provides developers with distinct tools to help them build complex user interfaces and web applications.

Using Node Package Manager

Vue 3

  1. Create a Vue Project

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

    npm install -g @vue/cli
    vue create spreadjs-quickstart :: Here, select Vue 3.
    cd spreadjs-quickstart
    npm run serve

    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 https://vuejs.org/guide/quick-start.html.

  2. Import SpreadJS Vue Module in Project

    Install SpreadJS Vue modules in your project using the following command:

    npm install @grapecity/spread-sheets-vue
    npm install @grapecity/spread-sheets
  3. Use SpreadJS in Vue application

    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 '@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");

    Modify the App.vue file by using the sample code given below:

    <template>
      <div id="spread-host">
        <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initSpread">
          <gc-worksheet>
            <gc-column> </gc-column>
          </gc-worksheet>
        </gc-spread-sheets>
      </div>
    </template>
    
    <script>
      import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
      import * as GC from "@grapecity/spread-sheets";
    
      export default {
        name: "app",
        components: {},
        data() {
          return {};
        },
        methods: {
          initSpread: function (spread) {
            this.spread = spread;
            let sheet = this.spread.getActiveSheet();
            sheet
              .getCell(0, 0)
              .vAlign(GC.Spread.Sheets.VerticalAlign.center)
              .value("SpreadJS");
          },
        },
      };
    </script>
    
    <style>
      .spreadHost {
        width: 800px;
        height: 800px;
      }
    </style>
  4. Save and Run the Application

    npm run serve

Vue 2

  1. Create a Vue Project

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

    npm install -g @vue/cli
    npm i -g @vue/cli-init
    vue init webpack spreadjs-quickstart :: Here, select Vue 2.
    cd spreadjs-quickstart
    npm run dev 

    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 https://v2.vuejs.org/v2/guide/installation.html.

  2. Import SpreadJS Vue Module in Project

    Install @grapecity/spread-sheets-vue in your project using the following command:

    npm install @grapecity/spread-sheets-vue
  3. Use SpreadJS in Vue application

    Modify the App.vue file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:

    <template>
      <div>
          <gc-spread-sheets
            :hostClass='hostClass'
          >
            <gc-worksheet
              :dataSource="dataTable"
              :autoGenerateColumns = 'autoGenerateColumns'
            >
              <gc-column
                :width="width"
                :dataField="'price'"
                :visible = 'visible'
                :formatter = 'formatter'
                :resizable = 'resizable'
              ></gc-column>
            </gc-worksheet>
          </gc-spread-sheets>
      </div>
    </template>
    <script>
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
      import  '@grapecity/spread-sheets-vue'
      export default {
        data(){
          return {
            hostClass:'spread-host',
            autoGenerateColumns:true,
            width:300,
            visible:true,
            resizable:true,
            formatter:"$ #.00"
          }
        },
        computed:{
          dataTable(){
            let dataTable = [];
            for (let i = 0; i < 42; i++) {
              dataTable.push({price: i + 0.56})
            }
            return dataTable
          }
        }
      }
    </script>
    <style scoped>
    .spread-host {
        width: 500px;
        height: 600px;
    }
    </style>
  4. Save and Run the Application

    npm run dev

Using Traditional HTML

Vue 2

SpreadJS can be used with Vue 2 using traditional HTML. This method involves the following steps:

  1. Create a HTML page

    As the first step, you need to create an HTML page.

  2. Add SpreadJS and Vue-SpreadJS to HTML template

Add references to the gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css and gc.spread.sheets.vue.*.*.*.js files in the HTML template (i.e. your index.html file).

  1. Use SpreadJS in Vue application

    Now, you can use SpreadJS in your Vue application. As an example, you can use the sample code given below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello SpreadJS Vue</title>
        <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
        <style>
            #app{
                width: 100%;
                height:100%;
            }
            .vue-demo{
                width: 800px;
                height:400px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
    <div id="app">
     <app></app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
    <script src="lib/gc.spread.sheets.vue.js"></script>
    <script type="text/x-template" id="app-template">
         <div>
            <gc-spread-sheets
              v-bind:hostClass='hostClass'
              @workbookInitialized='spreadInitHandle'
            >
                <gc-worksheet  >
                </gc-worksheet>
            </gc-spread-sheets>
         </div>
    </script>
    <script type="text/javascript">
        window.onload = function () {
            Vue.component('app', {
                template: '#app-template',
                data:function () {
                    return {
                        hostClass: "vue-demo"
                    }
                },
                methods: {
                    spreadInitHandle: function (spread) {
                        window.mySpread = spread;
                        console.log('now you can also get spread from window');
                    }
                }
            });
            new Vue({
                el:"#app",
            })
        }
    </script>
    </body>
    </html> 

    The SpreadSheets, Worksheet, and Column are the basic elements of tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

    <gc-spread-sheets>
    <gc-worksheet>
    <gc-column></gc-column>
        ...
    </gc-worksheet>
      ...
    </gc-spread-sheets>

The following topics list the element directives.