SpreadJS 14
JavaScript Frameworks / SpreadJS with Vue
In This Topic
    SpreadJS with Vue
    In This Topic

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

    Implement Vue 3 and Vue 2 Using Node Package Manager

    This method involves the following steps:

    1. Create a Vue Project

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

      Command Prompt
      Copy Code
      npm install -g @vue/cli
      npm install -g yarn :: If yarn is not installed.
      vue create spreadjs-quickstart :: Here, select Vue 3.
      cd spreadjs-quickstart
      yarn 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://v3.vuejs.org/guide/installation.html.

    2. Import SpreadJS Vue Module in Project

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

      Command Prompt
      Copy Code
      npm install @grapecity/spread-sheets-vue
      

    3. Use SpreadJS in Vue application

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

      main.js
      Copy Code
      import { createApp } from 'vue'
      import {GcSpreadSheets, GcWorksheet, GcColumn} from '@grapecity/spread-sheets-vue'
      import App from './App.vue'
       
      let app = createApp(App);
      app.component('gc-Column', GcColumn);
      app.component('gc-SpreadSheets', GcSpreadSheets);
      app.component('gc-Worksheet', GcWorksheet);
      app.mount('#app');
      

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

      App.vue
      Copy Code
      <template>
          <div id="spread-host">
              <gc-SpreadSheets hostClass="spreadHost">
                  <gc-Worksheet>
                      <gc-Column>
                      </gc-Column>
                  </gc-Worksheet>
              </gc-SpreadSheets>
          </div>
      </template>
      <script>
          import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
          export default {
              name: 'app',
              components: {
              },
              data() {
                  return {
                  }
              }
          }
      </script>
      <style>
          .spreadHost
          { width: 800px; height: 800px; }
      </style>
      

    4. Create Vue config file

      Create the "vue.config.js" file in root directory and add this below mentioned code:

      vue.config.js
      Copy Code
      module.exports =
      {   transpileDependencies: ['@vue/reactivity'] }
      

    5. Save and Run the Application
      Command Prompt
      Copy Code
      yarn serve
      
    1. Create a Vue Project

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

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

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

      JavaScript
      Copy Code
      <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
      Command Prompt
      Copy Code
      npm run dev
      

    Implement Vue 2 Using Traditional HTML

    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 a 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).

    3. 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:

      JavaScript
      Copy Code
      <!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 with tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

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

    The following topics list the element directives.