Shulou(Shulou.com)06/03 Report--

Overview

SpreadJS pure front-end table control V11.2 (SP2) version has fully supported Vue extension, let's take a look at how to cooperate with VUE CLI, only 3 minutes to quickly build a SpreadJS Vue project.

Install vue-cli (30s)

Install (https://cli.vuejs.org/) through the command ```npm install-g @ vue/cli ````

Create a vue-spreadjs project (time-consuming 1Min)

Please configure the project options according to the project requirements:

Install spread.sheets (time consuming 20s) "@ grapecity/spread-excelio": "^ 11.2.3", "@ grapecity/spread-sheets": "^ 11.2.3", "@ grapecity/spread-sheets-print": "^ 11.2.3", "@ grapecity/spread-sheets-resources-zh": "^ 11.2.3", "@ grapecity/spread-sheets-vue": "^ 11.2.3" Modify router/index.js to add router to spreadJS page (time-consuming 30s) routes: [{path:'/', name: 'HelloWorld',component: HelloWorld}, {path:' / spreadjs',name: 'spreadJS',component: SpreadJS}] New SpreadJS Component (time-consuming 30s)

Please add SpreadJS.vue file under components

Template content:

Spread.Sheets Import and Export Printing

Style content:

.spread-host {width: 100% control height: 400px leading border: 1px solid black;}

Script content:

/ * eslint-disable * / import "@ grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css"; import GC from "@ grapecity/spread-sheets"; import "@ grapecity/spread-sheets-vue"; import "@ grapecity/spread-sheets-resources-zh"; import ExcelIO from "@ grapecity/spread-excelio"; import FaverSaver from "file-saver"; import "@ grapecity/spread-sheets-print"; GC.Spread.Common.CultureManager.culture ("zh-cn") GC.Spread.Sheets.LicenseKey = ExcelIO.LicenseKey = "your key" export default {methods: {processFile (event) {this.excelFile = event.target.files [0];}, importExcel () {var excelIO = new ExcelIO.IO (); console.log (excelIO); var self = this;excelIO.open (this.excelFile, function (json) {self.spread.fromJSON (json); console.log (json);}), exportExcel () {var excelIO = new ExcelIO.IO (); var json = this.spread.toJSON () ExcelIO.save (json,function (blob) {FaverSaver.saveAs (blob, "export.xlsx");}, function (e) {console.log (e);});}, printWorkbook () {this.spread.print ();}, workbookInitialized (spread) {this.spread = spread;spread.refresh ();}}

WorkbookInitialized is a callback event after spread initialization is completed, in which we can get the initialized workbook object.

Deployment authorization needs to be added to both Sheets and ExcelIO, and deployment authorization can be configured in the global config.

Run the project (takes 10s)

After you create the npm install dependency, you can start the project through npm start

The browser accesses http://localhost:8081/#/spreadjs to see the effect.

It takes only 3 minutes to create a Vue project for SpreadJS. Of course, the power of SpreadJS, a pure front-end table control, is more than that. Try it in practice.

Extended reading

This article is about "creating a React project for SpreadJS in 3 minutes". For those who need it, please have an in-depth understanding.

Pure front-end table control SpreadJS, the layout and function of the market are highly similar to Excel of a table control, all Chinese operation interface, suitable for. NET, Java, mobile and other platforms of Excel-like data development, by Huawei, Hisense, Lixin, China Ping an, China can build, Zhongtong Express, Golden Kirin and Beijing Shensoft and other customers favor.

About Grape City

Empowered developer! Founded in 1980, Grape City is the world's leading software and service provider integrating development tools, business intelligence solutions, and management system design tools. Xi'an Grape City is its branch in China, providing software research and development services to the global market, and providing international advanced development tools, software and R & D consulting services for the informatization of Chinese enterprises. Grape City's controls and software products have won many awards at home and abroad, and have been widely used by hundreds of thousands of enterprises, schools and government agencies around the world.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.