立即下载

快速上手：5 分钟创建一个报表设计器

第一步：创建 HTML 页面

<!DOCTYPE html>
<html style="height: 100%; font-size: 14px">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        html,body{height: 100%;margin: 0;padding: 0}
        .spreadjs-report-tutorial{width: 100%;height: 100%}
        #demo-host{width: 100%;height: 100%}
    </style>
</head>
<body>
    <div class="spreadjs-report-tutorial">
        <div id="demo-host"></div>
    </div>
</body>
</html>

第二步：添加 SpreadJS 报表依赖库

                            
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-print/dist/gc.spread.sheets.print.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-designer-resources-cn/dist/gc.spread.sheets.designer.resource.cn.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js"></script>
<link href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.0.3/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css" rel="stylesheet" type="text/css" />

第三步：添加初始化代码（建立报表数据源 + 实例化报表设计器及模板）

<script>
window.addEventListener("load", function () {
  const designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("demo-host"));
  const spread = designer.getWorkbook();
  var dsOptions = {
    remote: {
      read: {
        url: "https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"
      }
    },
    schema: {
      type: "json",
      dataPath: 'data'
    }
  };
  var dataManager = spread.dataManager();
  var dataTable = dataManager.addTable("销售数据", dsOptions);
  dataTable.fetch().then(() => {
    const reportSheet = spread.addSheetTab(0, "第一个报表模板", GC.Spread.Sheets.SheetType.reportSheet);
    reportSheet.renderMode("Design");
  });
});
</script>

第四步：在浏览器中查看结果（SpreadJS 报表设计界面）

双击 HTML 文件即可，或者使用 VSCode 中的预览功能

在浏览器中查看结果（SpreadJS 报表设计界面）

至此，SpreadJS 报表设计器已经创建完成，可以通过拖拽左侧的数据表（字段）到右侧的表格中，完成模板的设计并通过顶部菜单完成报表的预览或进一步的设置，如下方视频所示：

点击这里下载示例中的 HTML 文件

入门学习资源

学习阶段 资源名称 资源类型 资源地址
入门了解 产品评估指南
帮助在评估了解阶段快速了解产品特性		 在线文档 官网页面
SpreadJS 学习路径
全面了解学习 SpreadJS 产品的最佳路径		 在线文档 官网页面
SpreadJS 报表入门视频
通过视频，快速了解 SpreadJS 报表		 在线视频 视频
学习应用 SpreadJS 报表类型示例
快速了解 SpreadJS 报表的各种报表类型实例		 在线 Demo Demo
SpreadJS 报表产品文档
借助产品文档，全面了解产品功能		 在线文档 产品文档
SpreadJS 在线功能示例
包含全部 SpreadJS 及报表功能的在线功能示例 		在线 Demo Demo
实战进阶 API 手册
了解具体接口的调用规范		 在线文档 产品文档
报表高阶功能示例
了解具体接口的调用规范 		在线 Demo Demo
实战代码库
参考更多在实际开发中的扩展能力 		在线 Demo Demo

进阶功能推荐

Concept / 核心概念

Layout / 布局

Data / 数据

Pagination / 分页

Formula / 公式函数

DataEntry / 数据录入

Render / 渲染特性

Chart / 图表

Column / 分栏

AutoFit / 自适应

Other / 其他

更多典型报表示例

主从明细

报表类型展示-主从报表

行式报表

报表类型展示-行式报表

自由布局

报表类型展示-自由报表

分页报表

报表类型展示-分页报表

交叉统计

报表类型展示-交叉报表

行列分栏

报表类型展示-分栏报表

表单填报

报表类型展示-表单填报

图表报表

报表类型展示-图表报表

分组汇总

报表类型展示-分组报表