# html-xzreport-example

**Repository Path**: tizdata_admin/html-xzreport-example

## Basic Information

- **Project Name**: html-xzreport-example
- **Description**: html 小智报表简单示例工程，更多报表示例参考vue3示例工程
- **Primary Language**: JavaScript
- **License**: LGPL-2.1
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-13
- **Last Updated**: 2024-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XZReport - 小智报表（一款免费的纯前端报表控件）

v3.7.2 | 2023-05-11


 一款原生JS的免费纯前端报表控件，帮助产品高效解决各种报表绘制与导出打印问题。功能涵盖：报表样式绘制、打印格式设置、数据处理函数、交互操作功能等！

- 原生JS开发包形态，可快速应用于各种开发框架。
- 类Excel操作界面，拖拽式报表设计交互，内置大量数据处理函数。
- 丰富的报表样式支持，如：动态行列交叉报表、标签报表、预警报表等。
- 支持报表导出、列表批量打印、低分辨率打印、格式套打打印等交互操作。
- 可直接调用API方法，快速搭建报表场景，如：内置报表工具、搭建报表中心等。

```
开源协议：`功能永久免费、可以商用、代码不开放`。
```


快速体验： [https://xzreport.com](https://xzreport.com "xzreport.com")


## 纯HTML嵌入样例使用步骤
-----------------------------------
### 第一步：下载HTML嵌入样例工程
```
git clone  https://gitee.com/tizdata_admin/xzHtmlExample.git
```
### 第二步： 进入样例工程目录
```
cd  xzHtmlExample
```
### 第三步： 打开样例工程
```
code  .
```
### vscode开发工具内置方式预览html页面(不要使用firefox/googlechrome 直接打开)

### 各个产品的嵌入代码样例，在对应的 index???.html文件中

### 嵌入样例目录结构
<img src="./images/100.png" alt="">

### 预览打开方式
<img src="./images/210-xzChartReport1.png" alt="">

### xzChart效果
<img src="./images/211-xzChartReport1.png" alt="">

### xzChartDesigner效果
<img src="./images/311-xzChartDesigner1.png" alt="">

### xzReport效果
<img src="./images/411-xzReport1.png" alt="">

### xzReportDesigner效果
<img src="./images/511-xzReportDesigner-1.png" alt="">




反馈问题
-----------------------------------

> 发现bug 请在github上[发issue](https://github.com/tianzhidata/XZReport/issues/new)


开发文档
-----------------------------------

- 官方网站： https://www.xzreport.com/
- 在线服务 ： [小智报表 (xzreport.com)](https://designer.xzreport.com/login)
- 小智BI：https://doc.tizdata.com/xiaozhi/651
- 小智报表：https://doc.tizdata.com/xiaozhi/650
- QQ交流群：894709724 




产生背景
-----------------------------------

在软件开发中，需要解决用户对报表方面的一系列需求：

1.复杂的报表样式需求。
软件系统在开发报表时，会遇到各种复杂的报表需求和挑战，如：动态行列报表、多重聚合计算报表、交叉透视报表、自由布局报表、平铺报表、分栏报表、多源报表等。

2.自定义导出打印需求。
基于软件产生的发票、合同、标签、订单等单据和报表，用户可以根据自己的需求和喜好，对单据的内容、布局、样式等进行自定义和调整，以满足不同场景下的打印需求。

3.自己设计报表的需求。
用户期待软件系统中能提供自己设计报表的功能，无需二次开发，通过简单的拖拽和配置，即可灵活地设计出想要的报表样式和内容，从而灵活满足企业的个性化报表需求。




为什么选择 XZReport?
-----------------------------------

>    借助小智报表来实现报表开发，可以降低开发成本，提高开发效率，以及为用户创造了更好的产品体验。

- 轻松实现各种复杂报表样式
- 内置大量数据处理函数  
- 拖拽式操作实现报表样式调整
- 制作的报表自动适配和兼容
- 支持按模板打印/自定义打印等
- 支持分组、交叉，合计、表达式等复杂报表
- 灵活打印设置轻松实现格式套打
- 对低分辨率打印做了很好地支持
- 对低分辨率打印做了很好地支持
- 提供类Excel交互的报表设计器 




授权协议 
-----------------------------------

开源版本遵循 LGPL 条款发布，如果您不能接受 LGPL，并且需要将该项目用于商业用途且不想保留版权信息，需购买[商业授权]([报表工具,小智报表,报表控件,内嵌式报表工具,OEM，表格控件,开源报表工具-产品定价 (xzreport.com)](https://www.xzreport.com/vip))。



报表设计与预览效果
-----------------------------------

- 同比报表

<img src="images/报表样例图/同比报表图.webp" style="zoom:50%;" alt=""/>

- 比较报表

<img src="images/报表样例图/比较报表.webp" style="zoom:50%;" alt=""/>


- 跨层累计报表

<img src="images/报表样例图/跨层累计报表.webp" style="zoom:50%;"  alt=""/>

- 双向分组小计

<img src="images/报表样例图/双向分组小计报表.webp" style="zoom:50%;"  alt=""/>

- 条件汇总报表

<img src="images/报表样例图/条件汇总报表.webp" style="zoom:50%;"  alt=""/>

- 自由布局报表

<img src="images/报表样例图/自由布局报表.webp" style="zoom:50%;"  alt=""/>

- 组内占比报表

<img src="images/报表样例图/组内占比报表.webp" style="zoom:50%;"  alt=""/>

- 分片重复报表

<img src="images/报表样例图/分片重复报表.webp" style="zoom:50%;"  alt=""/>

- 交叉累计报表

<img src="images/报表样例图/交叉累计报表.webp" style="zoom:50%;"  alt=""/>