小智报表分发包嵌入

小智报表是一款纯原生js 构建的智能电子表格，旨在帮助产品高效解决报表问题。

1.展示端SDK的下载与嵌入

可访问全局变量 window.XZReport。可将小智报表设计器端创建的报表展示出来。

1.1 SDK获取

联系小智获取试用专属开发包

1.2 SDK资源文件说明

核心库 sheet-core

报表的核心文件，不管是展示端和设计器都需要引入

ui库 sheet-ui

报表的UI组件库，不管是展示端和设计器都需要引入

设计器库 sheet-design

报表的设计器组件，设计器需要引入，展示端不需要

数据处理库 data-handler

报表的数据处理需要用到的。展示端需要，设计器不需要

参数面板库 params-panel

参数面板相关的，如果用到了参数查询等，展示端和设计器都需要引入。不需要的话，可以不引入

excel库 excel-io

excel 导入导出功能 如果使用到了相关功能。就需要引入

公式库 formula

公式相关 如果用到了相关功能，就需要引入

打印库 print

打印和pdf导出功能相关的库 如果使用到了此功能。展示端需要引入

条形码库 barcode

条形码相关功能，如果用到了，需要引入

二维码库 qrcode

二维码相关的库，如果用到了，需要引入

图表库 chart

图表功能相关的库，如果用到了，需要引入

1.3 嵌入

因为是原生js构建，所以说和框架无关。可以在vue ,react等任意框架中使用。
开发文件XZReport/xzreport.js 引入后, 可访问全局变量 window.XZReport。小智报表展示端需要一个dom元素来实现初始化，小智报表在初始化方法中有一个option字段，我们通过该option字段来对设计器进行参数设置，其它更多的参数请查看注释里的说明。
初始化之前，我们需要先准备一些控件属性、数据和报表配置 （以json数据为例）

const options = {
  view: {
    width: () => document.documentElement.clientWidth,  //设置宽度  function 返回值为number
    height: () => document.documentElement.clientHeight //设置高度  function 返回值为number
  },   
  renderArrow:false,  // 是否显式 扩展方向图标
  showFreeze:false,  // 是否显式冻结线
  showGrid:false   // 是否显式网格线
};

// 现在报表里数据配置分为3种 type 1 json数据  3API服务  4 接入的外部数据集
// API服务的配置是已经存在报表配置信息中的 
// json 数据需要初始化控件的时候传入 或者使用 update方法更新
const data = [{
  name: "test",
  response_data: [{
    "商品": "A产品",
    "季度": 1,
    "销售额": 5890.56
  }, {
    "商品": "A产品",
    "季度": 2,
    "销售额": 4566.26
  }, {
    "商品": "A产品",
    "季度": 3,
    "销售额": 7861.56
  }, {
    "商品": "A产品",
    "季度": 4,
    "销售额": 5654.56
  }, {
    "商品": "A产品",
    "季度": 1,
    "销售额": 5820.96
  }, {
    "商品": "A产品",
    "季度": 2,
    "销售额": 5666.26
  }, {
    "商品": "A产品",
    "季度": 3,
    "销售额": 8661.56
  }, {
    "商品": "A产品",
    "季度": 4,
    "销售额": 5254.56
  }, {
    "商品": "B产品",
    "季度": 1,
    "销售额": 5890.56
  }, {
    "商品": "B产品",
    "季度": 2,
    "销售额": 4456.16
  }, {
    "商品": "B产品",
    "季度": 3,
    "销售额": 7561.56
  }, {
    "商品": "B产品",
    "季度": 4,
    "销售额": 3554.56
  }, {
    "商品": "B产品",
    "季度": 1,
    "销售额": 4620.96
  }, {
    "商品": "B产品",
    "季度": 2,
    "销售额": 5456.26
  }, {
    "商品": "B产品",
    "季度": 3,
    "销售额": 8891.56
  }, {
    "商品": "B产品",
    "季度": 4,
    "销售额": 5623
  }, {
    "商品": "C产品",
    "季度": 1,
    "销售额": 4600.78
  }, {
    "商品": "C产品",
    "季度": 2,
    "销售额": 5246
  }, {
    "商品": "C产品",
    "季度": 3,
    "销售额": 7761.56
  }, {
    "商品": "C产品",
    "季度": 4,
    "销售额": 8164
  }, {
    "商品": "C产品",
    "季度": 1,
    "销售额": 4645.56
  }, {
    "商品": "C产品",
    "季度": 2,
    "销售额": 6579
  }, {
    "商品": "C产品",
    "季度": 3,
    "销售额": 7591.56
  }, {
    "商品": "C产品",
    "季度": 4,
    "销售额": 7168
  }, {
    "商品": "D产品",
    "季度": 1,
    "销售额": 4678.56
  }, {
    "商品": "D产品",
    "季度": 2,
    "销售额": 6659
  }, {
    "商品": "D产品",
    "季度": 3,
    "销售额": 7567.56
  }, {
    "商品": "D产品",
    "季度": 4,
    "销售额": 7498
  }, {
    "商品": "D产品",
    "季度": 1,
    "销售额": 5246
  }, {
    "商品": "D产品",
    "季度": 2,
    "销售额": 4645
  }, {
    "商品": "D产品",
    "季度": 3,
    "销售额": 7561.8
  }, {
    "商品": "D产品",
    "季度": 4,
    "销售额": 7941
  }],
  type:1     // 1 json 数据    3 api服务
}]

// 注意！需要使用开发者平台设计器导出的配置json才会生效
const sheetConfig = [{
    "name": "sheet1",
    "SheetData": {
        "freeze": "A1",
        "columnHead": [{
            "Column": 0
        }, {
            "Column": 1
        }, {
            "Column": 2
        }],
        "rowHead": [{
            "Row": 0
        }, {
            "Row": 1
        }, {
            "Row": 2
        }],
        "dataConfig":[],
        "apiConfig":[],
        "paramsConfig":[],
        "stylesConfig": [{
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            }
        }, {
            "align": "center",
            "valign": "middle"
        }, {
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            },
            "align": "center"
        }, {
            "align": "center"
        }, {
            "align": "center",
            "valign": "middle",
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            }
        }, {
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            },
            "align": "left"
        }, {
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            },
            "align": "center",
            "bgcolor": "#01B0F1"
        }, {
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            },
            "align": "center",
            "bgcolor": "#93D051"
        }, {
            "border": {
                "bottom": ["thin", "#666"],
                "top": ["thin", "#666"],
                "left": ["thin", "#666"],
                "right": ["thin", "#666"]
            },
            "align": "center",
            "bgcolor": "#FFC001"
        }],
        "cellConfig": [{
            "column": 0,
            "row": 0,
            "value": "",
            "styleIndex": 5,
            "editable": true,
            "slash": {
                "text": "商品|季度",
                "type": 0,
                "lineStyle": "thin",
                "lineColor": "#000"
            },
            "dataConfig": {}
        }, {
            "column": 1,
            "row": 0,
            "value": "test.商品",
            "valueType": 1,
            "expansion": 2,
            "styleIndex": 2,
            "editable": false,
            "scaleType": 1,
            "dataConfig": {
                "value": "test.商品",
                "data_type": "3",
                "merge": 1,
                "axisType": 1,
                "order": 0
            },
            "type": 2,
            "dataType": "3"
        }, {
            "column": 2,
            "row": 0,
            "value": "合计",
            "styleIndex": 6,
            "type": 6
        }, {
            "column": 0,
            "row": 1,
            "value": "test.季度",
            "valueType": 1,
            "expansion": 1,
            "styleIndex": 2,
            "editable": false,
            "scaleType": 1,
            "dataConfig": {
                "value": "test.季度",
                "data_type": "2",
                "axisType": 1,
                "order": 0,
                "merge": 1
            },
            "type": 2,
            "dataType": "2"
        }, {
            "column": 1,
            "row": 1,
            "value": "test.销售额",
            "valueType": 1,
            "expansion": 3,
            "styleIndex": 2,
            "editable": false,
            "scaleType": 1,
            "dataConfig": {
                "value": "test.销售额",
                "data_type": "2",
                "aggregate": 1,
                "axisType": 2,
                "order": 0
            },
            "type": 2,
            "dataType": "2"
        }, {
            "column": 2,
            "row": 1,
            "value": "=SUM(B2)",
            "styleIndex": 6,
            "type": 5
        }, {
            "column": 0,
            "row": 2,
            "value": "合计",
            "styleIndex": 7,
            "type": 6
        }, {
            "column": 1,
            "row": 2,
            "value": "=SUM(B2)",
            "styleIndex": 7,
            "warn": [{
                "name": "条件1",
                "act_on": 1,
                "cond_str": "((字段：test.商品) 不为空 )",
                "filter": {
                    "logic": 1,
                    "params": [{
                        "logic": 1,
                        "params": [{
                            "column": "0:1",
                            "data_type": 3,
                            "logic": 1,
                            "type": 8,
                            "value": "",
                            "cname": "test.商品",
                            "is_req": false
                        }]
                    }]
                },
                "style_str": "小数位：2位； ",
                "stylesConfig": {
                    "format": {
                        "decimal": 2
                    }
                }
            }],
            "type": 5
        }, {
            "column": 2,
            "row": 2,
            "value": "=SUM(B2)",
            "styleIndex": 8,
            "warn": [{
                "name": "条件1",
                "act_on": 1,
                "cond_str": "((字段：test.商品) 不为空 )",
                "filter": {
                    "logic": 1,
                    "params": [{
                        "logic": 1,
                        "params": [{
                            "column": "0:1",
                            "data_type": 3,
                            "logic": 1,
                            "type": 8,
                            "value": "",
                            "cname": "test.商品",
                            "is_req": false
                        }]
                    }]
                },
                "style_str": "小数位：2位； ",
                "stylesConfig": {
                    "format": {
                        "decimal": 2
                    }
                }
            }],
            "type": 5
        }],
        "groupConfig": [{
            "label": "A1-C3",
            "children": [{
                "label": "A2-C3",
                "children": [{
                    "label": "A2-B3",
                    "borderColor": "rgba(255, 115, 191)",
                    "bgColor": "rgba(255, 115, 191,0.5)",
                    "noagg": false,
                    "no_agg": false,
                    "repeat": {
                        "isRepeat": false,
                        "repeatKey": "",
                        "repeatValue": ""
                    },
                    "position": "A2:B3"
                }],
                "borderColor": "rgba(115, 187, 255)",
                "bgColor": "rgba(115, 187, 255,0.5)",
                "noagg": false,
                "no_agg": false,
                "repeat": {
                    "isRepeat": false,
                    "repeatKey": "",
                    "repeatValue": ""
                },
                "position": "A2:C3"
            }],
            "borderColor": "rgba(94, 255, 215)",
            "bgColor": "rgba(94, 255, 215,0.5)",
            "noagg": false,
            "no_agg": false,
            "repeat": {
                "isRepeat": false,
                "repeatKey": "",
                "repeatValue": ""
            },
            "position": "A1:C3"
        }],
        "collapse": [],
        "toolbarButtonList": [{
            "showIcon": true,
            "showText": true,
            "text": "首页",
            "icon": "fa fa-step-backward",
            "color": "#2c3e50",
            "show": true,
            "type": 1
        }, {
            "showIcon": true,
            "showText": true,
            "text": "上一页",
            "icon": "xzreport-icon-arrow-left-filling",
            "color": "#2c3e50",
            "show": true,
            "type": 2
        }, {
            "showIcon": true,
            "showText": true,
            "text": "当前页/总页数",
            "icon": "",
            "color": "#2c3e50",
            "show": true,
            "type": 3
        }, {
            "showIcon": true,
            "showText": true,
            "text": "下一页",
            "icon": "xzreport-icon-arrow-right-filling",
            "color": "#2c3e50",
            "show": true,
            "type": 4
        }, {
            "showIcon": true,
            "showText": true,
            "text": "末页",
            "icon": "fa fa-step-forward",
            "color": "#2c3e50",
            "show": true,
            "type": 5
        }, {
            "showIcon": true,
            "showText": true,
            "text": "打印",
            "color": "#2c3e50",
            "icon": "fa fa-print",
            "show": true,
            "type": 6
        }, {
            "showIcon": true,
            "showText": true,
            "text": "导出",
            "icon": "fa fa-download",
            "color": "#2c3e50",
            "show": true,
            "type": 7
        }]
    }
}]

原生js嵌入示例

<div id="chartContainer"></div>
// 引入ui
import "/xzSpreadsheet/sheet-ui/sheet-ui.css"
import "/xzSpreadsheet/sheet-ui/sheet-ui.js"
// 引入公式
import "/xzSpreadsheet/formula/formula.js"
// excel
import "/xzSpreadsheet/excel-io/excel-io.js"
// 参数面板
import "/xzSpreadsheet/params-panel/params-panel.css"
import "/xzSpreadsheet/params-panel/params-panel.js"
// qrcode
import "/xzSpreadsheet/qrcode/qrcode.js"
// 条形码
import "/xzSpreadsheet/barcode/barcode.js"
// 数据处理
import "/xzSpreadsheet/data-handler/data-handler.js"
// 打印
import "/xzSpreadsheet/print/print.js"

// 引入图表
import "/xzSpreadsheet/chart/chart.css"
import "/xzSpreadsheet/chart/chart.js"

// 核心库
import "/xzSpreadsheet/sheet-core/sheet-core.css"
import "/xzSpreadsheet/sheet-core/sheet-core.js"

XZReport.setKey(授权码)
// options控件的配置项  sheetConfig 报表信息   data数据
const sheet = XZReport("#container", options,sheetConfig,data);
// 配置改变时 需要使用 update 方法更新 sheetConfig,data 都是可选参数
//spreadSheet.update(sheetConfig?,data?)

Vue嵌入示例 （ 以vue 3 为例 ）

<template>
  <div id="container" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 引入ui
import "@/assets/xzSpreadsheet/sheet-ui/sheet-ui.css"
import "@/assets/xzSpreadsheet/sheet-ui/sheet-ui.js"
// 引入公式
import "@/assets/xzSpreadsheet/formula/formula.js"
// excel
import "@/assets/xzSpreadsheet/excel-io/excel-io.js"
// 参数面板
import "@/assets/xzSpreadsheet/params-panel/params-panel.css"
import "@/assets/xzSpreadsheet/params-panel/params-panel.js"
// qrcode
import "@/assets/xzSpreadsheet/qrcode/qrcode.js"
// 条形码
import "@/assets/xzSpreadsheet/barcode/barcode.js"
// 数据处理
import "@/assets/xzSpreadsheet/data-handler/data-handler.js"
// 打印
import "@/assets/xzSpreadsheet/print/print.js"

// 引入图表
import "@/assets/xzSpreadsheet/chart/chart.css"
import "@/assets/xzSpreadsheet/chart/chart.js"

// 核心库
import "@/assets/xzSpreadsheet/sheet-core/sheet-core.css"
import "@/assets/xzSpreadsheet/sheet-core/sheet-core.js"
let sheet = null;
onMounted( () => {
  sheet =  XZReport("#container", options,sheetConfig,data);
});

React嵌入示例 ( 以React 16 为例)

import React, { useEffect } from 'react';
// 引入ui
import "@/assets/xzSpreadsheet/sheet-ui/sheet-ui.css"
import "@/assets/xzSpreadsheet/sheet-ui/sheet-ui.js"
// 引入公式
import "@/assets/xzSpreadsheet/formula/formula.js"
// excel
import "@/assets/xzSpreadsheet/excel-io/excel-io.js"
// 参数面板
import "@/assets/xzSpreadsheet/params-panel/params-panel.css"
import "@/assets/xzSpreadsheet/params-panel/params-panel.js"
// qrcode
import "@/assets/xzSpreadsheet/qrcode/qrcode.js"
// 条形码
import "@/assets/xzSpreadsheet/barcode/barcode.js"
// 数据处理
import "@/assets/xzSpreadsheet/data-handler/data-handler.js"
// 打印
import "@/assets/xzSpreadsheet/print/print.js"

// 引入图表
import "@/assets/xzSpreadsheet/chart/chart.css"
import "@/assets/xzSpreadsheet/chart/chart.js"

// 核心库
import "@/assets/xzSpreadsheet/sheet-core/sheet-core.css"
import "@/assets/xzSpreadsheet/sheet-core/sheet-core.js"
const example = props => {
  let sheet = null;

  useEffect(() => {
    sheet =  XZReport("#container", options,sheetConfig,data);
  }, []); 
  
  return (
    <div id="container" ></div>
  );
}

Preview

2. 展示端外部数据回调事件

需要外部传入数据时应该在表格配置项 options 中配置 onUpdateData
注意！ 只有报表配置了外部数据集时才会触发此方法 （外部数据集：类型为4的数据集）

options.onUpdateData = onUpdateData
// 获取数据表数据
// datasets => [{name:"数据表名称",id:"数据表id"...}]  参与获取数据的数据集
// params => [{name:"参数名称",value:"参数值"}]  value的类型是字符串或者数组
// 该方法的返回值是一个Promise
const onUpdateData = (datasets,params)=>{
  return new Promise((resolve, reject)=>{
    // resolve的数据格式
    let results = [
      {
        name:"数据表名称",
        response_data:[] // 支持两种数据格式  1.{columns:[a,b],data:[[1,2]]} 2. [{a:1,b:2}]
      }
    ]
    resolve(results)
  })
}

3.展示端查询面板保存个人方案

在现代业务环境中，不同用户可能有着不同的需求和偏好，因此为他们提供定制化的查询方案变得至关重要。这意味着系统或服务应能够根据每个用户的特定需求提供个性化的查询选项和结果，小智报表对这类场景也做了支持
保存个人方案的设计也是分为四类 增删改查

【查看】操作

需要初始化个人方案应该在表格配置项 options 中配置onUpdateData ，效果如下图

options.onQueryPlan = onQueryPlan
onQueryPlan:()=> {
	return new Promise((resolve,reject)=>{
		let list = [
			// name:方案的名称，plan:查询条件 更详细的描述请看末尾
			{name:"方案名称",plan:[{"name":13123,value:"门店01",styleType:1}]}
		]
		resolve(list)
	})
}

/**
	plan [{"name":13123,value:"门店01",styleType:1}]
	name 查询条件的名称 value 查询条件的值  styleType 是查询的样式效果
	styleType  1 下拉单选  2 下拉多选  3 展开单选  4 展开多选 7 数字区间 8日期选择  9 日期区间   10 输入框  11 文本区间
*/

Preview

【增删改】操作

需要 报表实例去响应"query-plan"事件

// spreadSheet 报表实例
spreadSheet.on("query-plan",(data,type,cb)=>{
	// data 返回的数据  {"name":13123,value:"门店01",styleType:1}
	// type 当前进行的操作类型  增 add 删 delete 改 edit
	// cb 操作成功之后需要执行的回调函数
})

4. 展示端打印功能方案

帮助产品快速获得 按格式套打、按模板打印、按显示打印、按列表一键批量打印、自定义打印、打印模板设置 等能力，节约大量开发时间成本，提高产品体验和竞争力
需要调用XZReportPrint 方法生成打印模板实例 然后调用实例上的方法快速完成功能实现

// 打印模板需要调用 XZReportPrint 方法生成 打印模板实例
const reportPrint = XZReportPrint()

4.1 按模板打印

需要先调用 setTemplate方法设置打印模板 （打印模板可以通过设计器快速生成）然后在调用 print方法

// options 打印模板列表
// [{name:'模板名称',print:sheetConfig}]  name：模板名称， print：对应的是报表配置项
// 设置模板
reportPrint.setTemplate(options)
// data   //打印报表数据 data支持传入二维数组，二维数组为批量数据打印
reportPrint.print(data)

Preview

4.2 按模板预览打印

需要先调用 setTemplate方法设置打印模板 （打印模板可以通过设计器快速生成）然后在调用 previewPrint方法

// 参数对应 print方法中的参数
// 效果如下图
// 设置模板
reportPrint.setTemplate(options)
reportPrint.previewPrint(data)

Preview

4.3 实现自定义打印

直接调用 customPrint方法即可。

//  data 同print方法中的参数data
// 效果如下图
// template => {name:'模板名称',print:print}
reportPrint.customPrint(data,template)

Preview