How to quickly create a Vue project for SpreadJS

This article focuses on "how to quickly create a SpreadJS Vue project", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to quickly create a SpreadJS Vue project.

Install vue-cli (30s)

Install (https://) via 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.

At this point, I believe you have a deeper understanding of "how to quickly create a SpreadJS Vue project". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!