电子表格控件教程:如何在 Vue 中使用 SpreadJS

翻译|使用教程|编辑:鲍佳佳|2020-09-28 10:00:56.993|阅读 26 次

概述:spreadJS可以通过两种方式与VUE一起使用,一是使用节点包管理器;二是使用传统HTML,本文将针对这两种方式做详细的说明。并提供完整示例以便读者理解。

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性,备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时,满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景,极大降低了企业研发成本和项目交付风险。更多详情信息文章教程点击这里>>

点击下载SpreadJS最新试用版

SpreadJS支持Vue----一个JavaScript框架,该框架为开发人员提供了不同的工具,以帮助他们构建复杂的用户界面和Web应用程序。

SpreadJS可以通过以下两种方式与Vue一起使用:

  1. 使用节点包管理器
  2. 使用传统HTML

使用节点包管理器

此方法涉及以下步骤:

  1. 创建一个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项目。

  2. 在项目中导入SpreadJS Vue模块

    接下来,您需要使用以下命令在项目中安装@ grapecity / spread-sheets-vue:

    $ npm install @grapecity/spread-sheets-vue

  3. 在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

此方法涉及以下步骤:

  1. 创建一个HTML页面

    第一步,您需要创建一个HTML页面。

  2. 将SpreadJS和Vue-SpreadJS添加到HTML模板

    在HTML模板中(即您的index.html文件)添加对gc.spread.sheets.all.*.*.*.min.js,  gc.SpreadJS.*.*.*.css and  gc.spread.sheets.vue.*.*.*.js 文件的引用

  3. 在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元。点击解更多优惠

如果你对我们的产品感兴趣或者有任何疑问,欢迎咨询慧都在线客服>>

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:spreadjs

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
SpreadJS

面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat