Using Spread.Sheets with Vue

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

Spread.Sheets can be used with Vue in the following two ways:

Using Nuget Package Manager
Using Traditional HTML

Using Nuget Package Manager

This method involves the following steps:

Create a Vue Project

Open the command prompt window and type the following commands in order to create a simple Vue project with vue init webpack.

$ npm install --global vue-cli

# create a new project using the "webpack" template
$ vue init webpack my-project

# install dependencies and go!
$ cd my-project
$ 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.

Import Spread.Sheets Vue Module in Project
Next, you need to install @grapecity/spread-sheets-vue in your project using the following command:

$ npm install @grapecity/spread-sheets-vue

Use Spread.Sheets in Vue application

Now, you can 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>

JavaScript

Copy Code

</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>

Using Traditional HTML

This method involves the following steps:

Create a HTML page
As the first step, you need to create a HTML page.
Add Spread.Sheets and Vue-Spread.Sheets to HTML template
Add references to the gc.spread.sheets.all.*.*.*.min.js, gc.spread.sheets.*.*.*.css and gc.spread.sheets.vue.*.*.*.js files in the HTML template (i.e. your index.html file).

Use Spread.Sheets in Vue application

Now, you can use Spread.Sheets 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>

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>

</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:

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

The following topics list the element directives.