怎么快速创建一个SpreadJS的Vue项目
本篇内容主要讲解“怎么快速创建一个SpreadJS的Vue项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么快速创建一个SpreadJS的Vue项目”吧!
安装vue-cli(耗时30S)
通过命令```npm install -g @vue/cli ```安装(https://)
创建vue-spreadjs工程(耗时1Min)
请根据项目需求配置工程选项:
通过npm install 或者在package.json中添加引用的方式安装spread.sheets(耗时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",
修改router/index.js为spreadJS页面添加router(耗时30S)
routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/spreadjs', name: 'spreadJS', component: SpreadJS } ]
新建SpreadJS Component(耗时30S)
请在 components 下添加SpreadJS.vue文件
template 内容:
<template> <div> <h2>Spread.Sheets</h2> <div> <input type='file' @change="processFile($event)"/> <button @click="importExcel">导入</button> <button @click="exportExcel">导出</button> <button @click="printWorkbook">打印</button> </div> <div style="text-align: left"> <gc-spread-sheets hostClass='spread-host' @workbookInitialized = 'workbookInitialized($event)'> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> </div> </div> </template>
Style内容:
<style> .spread-host { width: 100%; height: 400px; border: 1px solid black; } </style>
Script内容:
<script> /* 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(); } } } </script>
workbookInitialized是spread初始化完成后的回调事件,我们可以在事件中得到初始化好的workbook对象。
部署授权需要同时给Sheets和ExcelIO同时添加,部署授权可以在全局config中配置。
到此,相信大家对“怎么快速创建一个SpreadJS的Vue项目”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!