SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性,备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时,满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景,极大降低了企业研发成本和项目交付风险。更多详情信息文章教程点击这里>>
SpreadJS支持Vue----一个JavaScript框架,该框架为开发人员提供了不同的工具,以帮助他们构建复杂的用户界面和Web应用程序。
SpreadJS可以通过以下两种方式与Vue一起使用:
- 使用节点包管理器
- 使用传统HTML
使用节点包管理器
此方法涉及以下步骤:
- 创建一个Vue项目
打开命令提示符窗口,然后键入以下命令,以使用vue init webpack创建一个简单的Vue项目。
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project# install dependencies and go!
$ cd my-project
$ npm run dev完成后,将在目录中的指定位置创建Vue项目。
- 在项目中导入SpreadJS Vue模块
接下来,您需要使用以下命令在项目中安装@ grapecity / spread-sheets-vue:
$ npm install @grapecity/spread-sheets-vue - 在Vue应用程序中使用SpreadJS
现在,您可以根据需要修改App.vue文件。刷新浏览器窗口时,更改将反映出来。例如,您可以使用下面给出的示例代码:
<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>
使用传统HTML
此方法涉及以下步骤:
- 创建一个HTML页面
第一步,您需要创建一个HTML页面。
- 将SpreadJS和Vue-SpreadJS添加到HTML模板
在HTML模板中(即您的index.html文件)添加对gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css and gc.spread.sheets.vue.*.*.*.js 文件的引用。
- 在Vue应用程序中使用SpreadJS
现在,您可以在Vue应用程序中使用SpreadJS。例如,您可以使用下面给出的示例代码:
<!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>
SpreadSheets,Worksheet和Column是具有标签层次结构的基本元素。其他元素通过设置来起作用。主要标签层次为:
<gc-spread-sheets>
<gc-worksheet>
<gc-column> </ gc-column>
...
</ gc-worksheet>
...
</ gc-spread-sheets>
今天的内容就到这了,不要忘了在评论区留下的意见和建议!现电子表格控件SpreadJS正版授权限时优惠!低至3490;企业版最高立减6000元。点击了解更多优惠!