SpreadJS is a pure front-end spreadsheet control based on HTML5, which is compatible with more than 450 Excel formulas. With its high performance, cross-platform and high compatibility with Excel, SpreadJS is favored by enterprise users such as Huawei, Suning And Tianhong Capital. SpreadJS not only provides users with friendly Excel experience, but also meets business scenarios such as Web Excel component development, table document co-editing, data filling and Excel report design, greatly reducing enterprise R&D costs and project delivery risks. For more information on the article tutorial click here >>

Click here to download the latest SpreadJS trial

SpreadJS supports Vue—-, a JavaScript framework that provides developers with different tools to help them build complex user interfaces and Web applications.

SpreadJS can be used with Vue in two ways:

  1. Use the node package manager
  2. Using traditional HTML

Use the node package manager

This method involves the following steps:

  1. Create a Vue project

    Open a command prompt window, then type the following command to create a simple VUE project using 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! Cdmy −projectcd my-project cdmy−project NPM run dev

    When complete, the Vue project is created at the specified location in the directory.

  2. Import the SpreadJS Vue module into your project

    Next, you need to install @grapecity/spread-sheets-vue in your project using the following command:

    $ npm install @grapecity/spread-sheets-vue

  3. Use SpreadJS in your Vue application

    You can now modify the app.vue file as needed. When you refresh the browser window, the changes are reflected. For example, you could use the sample code given below:

                            <template>
Copy the code

    .spread-host { width: 500px; height: 600px; }

Using traditional HTML

This method involves the following steps:

  1. Create an HTML page

    First, you need to create an HTML page.

  2. Add SpreadJS and VUe-spreadjs to the HTML template

    In the HTML template (that is, your index.html file), add the gC.spread-sheets.all.*.*.*.min.js, Gc.spreadjs.*.*.*. CSS and gc.spreads.sheets.vue.*.*.*.

  3. Use SpreadJS in your Vue application

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

    <! DOCTYPE html>Copy the code

    Hello SpreadJS Vue #app{ width: 100%; height:100%; } .vue-demo{ width: 800px; height:400px; margin: 0 auto; }

SpreadSheets, Worksheets, and columns are the basic elements that have a label hierarchy. Other elements are set to work. The main label levels are:

That’s it for today, don’t forget to leave your comments and suggestions in the comments section!