报表需求背景:商品季度销售排行榜(带参数查询)
随着企业业务规模的扩大，对商品销售情况的精准掌握变得尤为重要。为此，企业亟需制作一张《商品季度销售排行榜》报表，以全面、系统地展示各商品在不同季度的销售表现。该报表需具备总计、小计功能，便于快速概览整体及细分销售数据；同时，需支持环比分析，以揭示销售趋势；此外，还需实现组内排名，明确商品在同类中的竞争力。为满足不同用户需求，报表应支持参数查询功能，允许灵活筛选数据。最后，为了方便数据传播与归档，报表需提供导出和打印功能。
小智报表解决方案
报表设计器要点(vue3)
嵌入SDK 功能选项配置和接口实现
引入 XZReportDesigner/xzreportdesigner.js , 可访问全局变量 window.XZReportDesigner。
报表设计 = 自由拖拽(低代码) + 极简配置
查询面板 低代码 + 极简配置
打印面板 低代码 + 极简配置
丰富工具栏 按钮控件（低代码 + 极简配置）
支持图片，二维码，条形码，html富文本等
数据保存
const {config, data} = sheetDesign.getData(); //报表设计器的保存事件
//拿到模板数据，接下来通过axios.post方法，提交业务后台入库
报表渲染要点(vue3)
准备模板(config,data)
在前面报表设计器保存数据中，已经提交到业务后台保存；现在只需要axios.get提取config,data这2个json数据
嵌入展现器JS SDK 功能选项配置
const option = {
mode: 'read', view: { width: 1920px, height:1080px }, // 设置报表的宽高
renderArrow: true, // 是否显式 扩展方向图标
showFreeze: true, // 是否显式冻结线
showGrid: true, // 是否显式网格线
showPreviewToolbar: true, showBottombar: true, showSelect: true,};
数据接口和渲染
渲染数据样例
渲染效果
参数查询(低代码/设计器极简配置)
数据导出(低代码/设计器极简配置)
点击导出按钮，即可下载excel文件，下面就是所见即所得的excel导出效果
接口少而简洁(默认可以满足大部需求)：
-
onUpdateDatasetList ：提供数据集列表
-
onUpdateData ：提供数据集记录（带参数查询）
-
sheetDesign.getData() ：提取报表设计器的模板数据
-
options功能选项配置 ：默认配置即可满足大部分需要
-
嵌入设计器/展现器脚本 ：嵌入脚本极简
-
Json数据格式 ：跨平台通用
总计 小计 环比 组内排名 层级坐标体系
分组/聚合/函数/富文本 简化后端程序员数据处理逻辑
分组/聚合/函数/富文本 减少后端数据库压力，前端只需要极少的原始数据
低代码 + 极简配置
原生JS SDK，和框架无关，可以在vue ,react等任意框架中使用
-
参数查询 零代码，极简配置开箱即用
-
导出 零代码，极简配置开箱即用
-
打印 零代码，极简配置开箱即用
报表样例源码下载
小智报表是天智鲲鹏在国内率先推出的一款原生JS SDK可嵌入智能电子表格。 采用类Excel的界面和操作方式，可视化的拖拽和配置，帮助产品高效解决各种报表样式制作与导出打印问题。 功能涵盖：报表样式绘制、打印格式设置、数据处理函数、交互操作功能等。 分为两个独立部署和运行的原生JS
SDK：报表设计器和报表展现器；
报表设计器内嵌大量计算函数/聚合/图表/导出/打印/查询等开箱即用组件，以拖拽和配置的方式实现中国式复杂报表模板的制作。
报表展现器则根据设计好的报表模板 + 对应的报表数据进行渲染；
本系列将聚焦于多款中国式复杂报表样式，演示小智报表嵌入式sdk是如何轻松实现他们的，真正体现了小智报表的 低代码 + 极简配置 + 开箱即用
