关于spreadjs:Vue-3-组件开发搭建基于SpreadJS的表格编辑系统功能拓展

38次阅读

共计 4372 个字符,预计需要花费 11 分钟才能阅读完成。

通过环境搭建和组件集成,咱们学会应用 Vite 和 SpreadJS,将在线 Excel 的编辑性能集成在 Vue 3 我的项目中。

本章,我将率领大家持续扩大 Vue 3 这个我的项目原型,实现数据绑定、模板文件导入 / 更新 / 导出和数据透视表等性能,本章的实现思路与上一篇“组件集成”根本相似。

设计思路

· 同时创立 SpreadJS 和 Designer(表格编辑器)两个组件,用切换路由的形式显示不同组件类型。

· 在编辑器组件的工具栏中减少“加载”和“更新”两个按钮。

· 点击“加载”即可加载从服务器获取的 Excel 文件,在编辑器中对该组件做一些批改,点击“更新”按钮,将批改后的文件传递给服务器。

· 切换路由显示 SpreadJS 组件,在该组件增加“加载”和“更新”两个 button,性能同上。

SpreadJS 组件介绍

SpreadJS 是一款基于 HTML5 的原生 JavaScript 组件,兼容 450 种以上的 Excel 公式,提供高度相似 Excel 的性能,次要用于开发 Web Excel 组件,实现多人协同编辑、高性能模板设计和数据填报等功能模块,组件架构合乎 UMD 标准,能够以原生的形式嵌入各类利用,并与前后端技术框架相结合。

集成 SpreadJS 组件

首先在 components/ SpreadSheet.vue 中集成 SpreadJS,代码如下图所示:


<template>

  <div>

    <div ref="ssHost" style="height:700px;width:100%;text-align: left;"></div>

  </div>

</template>

<script>

import {onMounted, ref} from "vue";

import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

import GC from "@grapecity/spread-sheets"

export default {

  name: 'SpreadSheets',

  props: { },

  setup(props, {emit}) {const ssHost = ref(null);

    onMounted(() => {var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);

      emit("workbookInitialized", workbook)

    });

    return {ssHost};

  }

}

</script>

具备步骤如下:

  1. 在模板中增加一个 div,这个 div 就是 spread 的容器,能够通过 css 设置容器的宽高地位等,也就是自定义了 spread 的显示大小及地位。
  2. 导入此组件所须要的依赖。
  3. 在 setup 办法中新建一个 spread。
  4. 在 views/ SpreadSheet.vue 中引入该组件及相干依赖。

import SpreadSheets from '../components/SpreadSheets.vue'

import {ref} from "vue"

import axios from "axios"

import GC from '@grapecity/spread-sheets'

import ExcelIO from '@grapecity/spread-excelio'
  1. 在模板中应用该组件标签

<template>

  <div>

    <button @click="load($event)"> 加载 </button>

    <button @click="update($event)"> 更新 </button>

    <SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>

  </div>

</template>
  1. 在 setup 函数中初始化 spread。

let workbook = undefined;

let workbookInitialized=(wb)=>{workbook = wb}

性能扩大:Excel 文档导入 / 更新 / 导出

Excel 文档的导入 / 更新 / 导出性能可通过自定义“加载”、“更新”和“导出”按钮实现,在 SpreadSheet 组件中增加自定义按钮的思路,与上篇 designer 组件的设计思路统一:

· Load 办法执行 excel 文件的加载,接管到后盾传递的 json 数据后,即应用 fromJSON 办法加载该文件。


let load = (e)=>{let formData = new FormData();

        formData.append("fileName", "path");

        axios.post('spread/loadTemplate', formData, {responseType: "json",}).then((response) => {if(response) {alert("加载胜利");

                templateJSON = response.data;

                workbook.fromJSON(templateJSON);

            }

        }).catch((response) => {alert("谬误");

        })

    }

· Update 执行文件的更新。在设计器对加载的文件做些操作,如批改背景色、增加文本等,应用 toJSON 办法以后 spread 保留为 json 数据传递给后盾存储。


let update = (e)=>{let spreadJSON = JSON.stringify(workbook.toJSON());

        let formData = new FormData();

        formData.append("jsonString", spreadJSON);

        formData.append("fileName", "fileName");

        axios.post('spread/updateTemplate', formData).then((response) => {if(response) {alert("更新胜利");

            }

        }).catch((response) => {alert("谬误");

        })

    }

· Save 办法执行将 spread json 导出为 excel 文件。


  *//export SpreadJS json to excel file*

 excelio.save(json, **function** (blob) {

  *//do whatever you want with blob*

  *//such as you can save it*

 }, **function** (e) {

  *//process error*

  console.log(e);

 });

性能扩大:数据透视表

SpreadJS 内置了数据透视表性能,通过将其集成到我的项目中,便能够应用数据透视表,该表反对排序、过滤等条件格局,能够按不同维度剖析数据,并且能够自定义主题。

SpreadJS 的数据透视表反对两种格局的数据源:

· table name: 数据透视表应用一个表格的名字去获取数据源。

· range formula: 数据透视表应用工作表的一个范畴公式获取数据,这个范畴公式必须是工作表的绝对路径。

若应用数据透视表,须要增加如下链接到文档的开始局部:


  <head>

  <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js'  type='text/javascript'></script>

  <script src='.../spreadjs/plugins/gc.spread.pivot.x.x.x.min.js'  type='text/javascript'></script>

  </head>

应用一个表格的名称去创立数据透视表:

    let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
    let sheet1 = spread.getSheet(0);
    let sheet2 = spread.getSheet(1);
    sheet1.setRowCount(250);
    let table = sheet.tables.add('table1', 0, 0, 200, 200);
    sheet1.setArray(0, 0, pivotSales);
    let pivotTable = sheet2.pivotTables.add("PivotTable", "table1", 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);

也可应用工作表的一个范畴公式创立数据透视表:


let range = "=Sheet2!A1:D4";
let pivotTable = sheet2.pivotTables.add("PivotTable", range, 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);

通过切换路由能够看到 SpreadJS 与在线表格编辑器能够失常切换显示。在编辑器中批改加载的 Excel 文件,点击工具栏“更新”按钮,再切换至 SpreadJS 组件,点击“加载”按钮便能够看到方才所批改的文件已被更新。

示例代码

· Vue3 集成 SpreadJS 组件 Demo 下载

以上就是在 Vue 3 中集成 SpreadJS 与在线表格编辑器的全部内容,除了 Vue,SpreadJS 还能够原生的形式嵌入各类利用(桌面软件、app、web),并与各类前后端技术框架(java、.NET、JavaScript、Vue、React 等)相结合。

通过集成 SpreadJS,开发者可研发出高性能的公式计算、在线导入导出 Excel 文档、数据透视表和可视化剖析性能,为零碎使用者提供灵便易用的用户体验。

扩大浏览

· Vue 3 组件开发实战:搭建基于 SpreadJS 的表格编辑零碎(环境搭建篇)

· Vue 3 组件开发实战:搭建基于 SpreadJS 的表格编辑零碎(组件集成篇)

· SpreadJS Vue 框架反对

正文完
 0