spreadJS可以通过两种方式与VUE一起使用，一是使用节点包管理器；二是使用传统HTML，本文将针对这两种方式做详细的说明。并提供完整示例以便读者理解。
SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。更多详情信息文章教程点击这里>>
SpreadJS最新试用版
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元。点击了解更多优惠！
如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询在线客服>>
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！