SpreadJS Overview--破解版网上轻松找到
SpreadJS is the most comprehensive spreadsheet solution for enterprise JavaScript development.
It combines grid capabilities and spreadsheet functionality to offer a complete Excel-like experience, including tables, charts, shapes, sparklines, high-speed calculation engine, conditional formatting, sorting and filtering along with extensive support for importing and exporting native Excel spreadsheets with no Excel dependencies. Some exclusive features like barcodes, rich text, cell buttons, cell dropdowns and range templates are also provided to assist developers in creating flawless JavaScript applications.
Use the SpreadJS widget to create and manage spreadsheets, advanced data grids, interactive dashboards, analytical charts, business intelligence reports, well-defined data entry forms and much more.
Microsoft and Excel are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Other brand and product names are trademarks or registered trademarks of their respective holders.
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
-
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 Quick Start | Vue.js.
-
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
-
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>
-
Save and Run the Application
npm run serve
Vue 2
-
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 Installation — Vue.js.
-
Import SpreadJS Vue Module in Project
Install
@grapecity/spread-sheets-vue
in your project using the following command:npm install @grapecity/spread-sheets-vue
-
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>
-
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:
-
Create a HTML page
As the first step, you need to create an HTML page.
-
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).
-
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>