Spreadjs报表使用教程

SpreadJS开发报表手摸手教学

前言

使用 SpreadJS 在线表格编辑器，仅需简单的拖拽点击，即可在线设计各类 Excel 报表模板，借助其开放的 API，即可开发实现数据填报、在线编辑、数据绑定等功能，有高度类似 Excel 的使用体验

使用方式非常简便，简单报表1-2小时便可实现

官方文档：[https://demo.grapecity.com.cn/spreadjs/help/docs/overview](https://demo.grapecity.com.cn/spreadjs/help/docs/overview)

实现方案

新增 报表子模块（https://git.code.tencent.com/Bonto_Project/tzreport.git），用来统一管理报表，各系统使用SpreadJS开发的报表都放在子模块中。

为什么这么做？

• 需要满足既可以在各自系统中使用，又可以无缝植入到报表管理系统
• 集成简单，减少重复代码
• 省去过多的权限配置

使用步骤

准备工作

添加 tzreport

git submodule add https://chay:Aa%40123123@git.code.tencent.com/Bonto_Project/tzreport.git src/tzreport

更新 tzlib

git submodule update

// vben项目使用 bangtuo-prod 分支
// elementPlus项目使用 bonto-prod

引入 SpreadJS

<!-- spreadjs -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.0.6/spread-sheets/styles/gc.spread.sheets.excel2013white.css"/>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.0.6/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.0.6/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.16.1.1.min.js"></script>

添加所需依赖

pnpm i tz-minio-upload dayjs -S

开始使用

目录要求

	页面统一放在 views/reports 下，按系统名称 / 报表名称格式，API同理

	例如：数字化料厂下的日库存报表目录格式为：views/reports/storage/daily-inventory；API目录格式为：api/reports/storage/daily-inventory

代码示例

DOM元素

<div id="gc-spread-sheets" v-show="iswork" style="height: 86vh; width: 100%"></div>

引入所需方法与接口

  import {
   
    dictDetailListByCode,
    reportFormsDailyInventoryApi,
  } from '../../../../api/reports/storage/daily-inventory/index';
  import {
    getFile } from '../../../../utils/minio/index';
  import {
    uploadMinio } from '../../../../utils/minio/upload';
  import {
    downloadByData } from '../../../../utils/file/download';

定义模板文件/数据文件名称

  declare let GC: any;  

  const iswork = ref<boolean>(false);  // 显示报表
  const spreads = ref<any>({
   });  // spreadjs实例
  const reporTemplateFolderName = 'reporttemplates/storage/'; // 报表模板文件夹名称
  const reportDataFolderName