SpreadJS是一款基于JavaScript的电子表格控件，通过以表格形式显示数据、高速的计算引擎以及数百种统计和财务函数及公式，提供类似于Excel的电子表格体验。它易于实现，可扩展并且灵活。尤其可以帮助增强您的应用程序，并将内容从一组简单的数据转换为更加有用、易懂的类似于Excel的仪表板。快速开始

App.vue

<template><div><input type="file" @change="importExcel($event)" /><button @click="exportExcel">导出EXCEL</button><gc-spread-sheets:hostClass="hostClass"@workbookInitialized="initWorkbook"><gc-worksheet /><gc-worksheet /></gc-spread-sheets></div>
</template><script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-resources-zh'
GC.Spread.Common.CultureManager.culture('zh-cn')
import * as GC from '@grapecity/spread-sheets'
import * as ExcelIO from '@grapecity/spread-excelio'
import '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets-charts'
import FileSaver from 'file-saver'
const GCsheets = GC.Spread.Sheets
export default {data() {return {hostClass: 'spread-host',spread: null,table: null,// 源数据data: {rows: [{compName: '广东联塑科技实业有限公司',compNo: '1010',datFees: [{compName: '广东联塑科技实业有限公司',compNo: '1010',createTime: null,creator: '',electricityFees: '2.00',imonth: '04',iyear: '2022',pageCode: '',payTotal: '6.00',taxFees: '1.00',taxRefund: '4.00',updateTime: null,updator: '',waterFees: '3.00',xtype: '1',},],plateTypeName: '塑料管道',},{compName: '福建联塑新材料科技有限公司',compNo: '1610',datFees: [{compName: '福建联塑新材料科技有限公司',compNo: '1610',createTime: null,creator: '',electricityFees: '2.00',imonth: '04',iyear: '2022',pageCode: '',payTotal: '6.00',taxFees: '1.00',taxRefund: '4.00',updateTime: null,updator: '',waterFees: '3.00',xtype: '1',},],plateTypeName: '塑料管道',},{compName: '佛山市联塑万嘉新卫材有限公司',compNo: '1030',datFees: [{compName: '佛山市联塑万嘉新卫材有限公司',compNo: '1030',createTime: null,creator: '',electricityFees: '123.00',imonth: '04',iyear: '2022',pageCode: '',payTotal: '369.00',taxFees: '123.00',taxRefund: '0.00',updateTime: null,updator: '',waterFees: '123.00',xtype: '5',},],plateTypeName: '管理及其他',},],},}},mounted() {},methods: {// 计算总和calcCount(typeArr, type) {let obj = typeArr.reduce((res, val) => {for (let k in res) {res[k] += parseFloat(val[k])}return res},{taxFees: 0,waterFees: 0,electricityFees: 0,payTotal: 0,taxRefund: 0,})for (let k in obj) {obj[k] = obj[k].toFixed(2)}obj.compName = type ? `${type}合计` : `总计`return obj},// 更改对象key值changeKey(obj, keymapping) {let oldKeysArr = Object.keys(obj)let arr = Object.entries(obj)keymapping.forEach((item) => {if (oldKeysArr.indexOf(item.key) !== -1) {arr[oldKeysArr.indexOf(item.key)][0] = item.newKey}})return Object.fromEntries(arr)},// 格式化表格数据formatData(data) {let output = []let map = {}for (let rec of data) {map[rec.plateTypeName] = map[rec.plateTypeName] || []map[rec.plateTypeName].push(...rec.datFees)}let totalCount = []for (let k in map) {totalCount.push(this.calcCount(map[k], k))output.push(...map[k], this.calcCount(map[k], k))}output.push(this.calcCount(totalCount))return output},// 初始化工作簿initWorkbook(spread) {let newData = this.formatData(this.data.rows)let keyMapping = [{ key: 'compName', newKey: '公司名称' },{ key: 'compNo', newKey: '公司编码' },{ key: 'electricityFees', newKey: '电费' },{ key: 'imonth', newKey: '月份' },{ key: 'iyear', newKey: '年份' },{ key: 'payTotal', newKey: '总开销' },{ key: 'taxFees', newKey: '税费' },{ key: 'taxRefund', newKey: '退税' },{ key: 'waterFees', newKey: '水费' },]newData = newData.map(item=>{return this.changeKey(item,keyMapping)})this.spread = spreadspread.suspendPaint() //暂停spread重绘let sheet = spread.getActiveSheet()let table = sheet.tables.addFromDataSource('Table1', 2, 1, newData)table.style(GCsheets.Tables.TableThemes['medium4'])table.highlightFirstColumn(true) // 第一列内容高亮sheet.setColumnWidth(0, 20) sheet.setColumnWidth(1, 240) // 设置sheet第二列宽度spread.resumePaint() //恢复spread重绘},importExcel(e) {let file = e.target.files[0]let self = thislet excelIO = new ExcelIO.IO()excelIO.open(file, (spreadJSON) => {self.spread?.fromJSON(spreadJSON)})},exportExcel() {if (this.spread) {let excelIO = new ExcelIO.IO()// spread.toJSON()设置 includeBindingSource 选项为 true,将表单或者表格中的数据源序列化到最终的 JSON 对象excelIO.save(this.spread.toJSON( { includeBindingSource: true }), (blob) => {FileSaver.saveAs(blob, 'export.xlsx')})}},},
}
</script><style>
.spread-host {width: 100%;height: 600px;
}
</style>

package.json

{"name": "sjs-vue-app","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"@grapecity/spread-excelio": "^14.0.1","@grapecity/spread-sheets": "^15.0.6","@grapecity/spread-sheets-charts": "^15.0.6","@grapecity/spread-sheets-resources-zh": "^15.0.6","@grapecity/spread-sheets-vue": "^15.0.6","@types/file-saver": "^2.0.1","core-js": "^3.6.5","file-saver": "^2.0.2","vue": "^2.6.11"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.13","@vue/cli-plugin-eslint": "~4.5.13","@vue/cli-service": "~4.5.13","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","vue-template-compiler": "^2.6.11"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"parserOptions": {"parser": "babel-eslint"},"rules": {"generator-star-spacing": "off","no-tabs": "off","no-unused-vars": "off","no-console": "off","no-irregular-whitespace": "off","no-debugger": "off"}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

效果图

spreadJS初体验相关推荐

苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
Windows Embedded Standard开发初体验(二)
支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...
Spring环境搭建，IoC容器初体验~
由于最近的任务是关于IoC配置文件格式的转换,所以需要从Spring的IoC容器开始学起,今天根据网上的介绍搭建了Spring环境,并对其IoC容器进行了初体验.文章中涉及到的软件以及推荐的一本关于S ...
来自新手Banana Pi香蕉派初体验
2019独角兽企业重金招聘Python工程师标准>>> 一.前言一段时间来对有强大的技术支持和完善的社区的Raspberry Pi很感兴趣,本想入一片学习学习,但转念一想Raspb ...
《深入理解Spark:核心思想与源码分析》——1.2节Spark初体验
本节书摘来自华章社区<深入理解Spark:核心思想与源码分析>一书中的第1章,第1.2节Spark初体验,作者耿嘉安,更多章节内容可以访问云栖社区"华章社区"公众号查看 ...

spreadJS初体验

App.vue

package.json

效果图

spreadJS初体验相关推荐

最新文章

热门文章