在 Office 三大办公套件中，Excel 可能是性能最多、最难精通的那一款了。从日常的表格录入到简单的业务数据统计分析，Excel 好像一位表面平平无奇，实力却深不可测的武林高手。纯熟应用 Excel 往往能在日常工作中取得事倍功半的成果，而这里所谓的“纯熟”除了相熟大量公式、图表绘制等操作外，还要把握一项十分重要的个性——数据透视表。
所谓数据透视表，就是将原始的明细数据表中波及的各组关联数据进行分类汇总的产物。用户能够依照不同的组合形式对原始数据进行解决。例如上面这样的销售业绩原始数据：
咱们想要晓得几位销售人员各自销售了多少汽车、销售额又是几何，就能够应用数据透视表来剖析：
从上表中能够分明地看到几位销售人员各个季度都卖了多少车、销售额多少、每个品牌卖掉多少……等信息，并且透视表中蕴含哪些字段都是随便抉择的。例如咱们只想统计各季度的销量和销售额：
这里就略过了售车品牌信息，对应的字段抉择设置为：
咱们还能够点开每个字段，抉择须要显示的子内容，例如只看 1 - 3 季度的业绩，或者只看某位销售人员的业绩，等等。
由此可见，数据透视表是一种不便地对原始数据进行按需可视化解决的工具，在日常工作中用处十分宽泛。当工作场景中存在揉合了大量信息的原始数据表时，就能够应用数据透视表来疾速取得有意义的数据洞察后果，为业务提供有价值的信息。
你的前端为何须要数据透视表？
在过来，少数企业人员应用数据透视表的惟一渠道就是 Excel。因为 Office 办公套件长期垄断企业办公市场，大部分行政和业务人员只会接触 Excel 一种数据分析工具，Excel 自身的性能也足够弱小，市场上就很难有其余工具的立足之地。
但随着数字化大潮汹涌而来，数字化转型成为简直所有企业都要面对的时机和挑战。疫情暴发后，居家办公的衰亡又对传统办公软件环境发动了新的冲击。明天的企业 IT、业务和行政人员往往须要在多种软件环境中切换，解决比过来高出一个甚至几个数量级的海量数据，在办公室、地铁、宾馆、家中随时都可能须要解决业务申请。在这样的场景中，数据分析的需要开始随处可见、随时呈现，单凭 Excel 或者相似的大型单体软件曾经远远不能应答新时代的简单挑战。
仍以上述业务数据为例，这家汽车销售企业的业务总监可能会在外部的业绩治理 App 上回顾本年数据，须要在 App 中应用数据透视表性能；人事人员统计奖金信息时，须要登入企业后盾治理网站查看业务数据，并在 Web 页面上获取业绩排名；高管筹备年度报告时，试图在报告中集成动静的透视表组件，不便现场展现……所有这些需要都很难应用 Excel 这样的单体软件实现，更多状况下适宜采纳嵌入办法，将透视表性能嵌入对应的前端利用中实现。
随着此类需要迅速增长，市面上开始呈现一站式的解决方案，不便企业和软件开发者将传统上由 Excel 实现的性能集成到各类利用和页面中。咱们明天的配角——SpreadJS 就是其中的佼佼者。SpreadJS 是由葡萄城开发的，基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品个性，备受华为、明源云、远光软件等知名企业青眼，被中国软件行业协会认定为“中国优良软件产品”。在 2020 年公布的 SpreadJS 14.0 版本中引入了弱小的数据透视表性能，满足了企业在泛滥场景集成数据分析深度能力的需要，也为前端软件开发者大大加重了累赘。
在前端集成数据透视表：简要教程
应用 SpreadJS，要建设一个如图所示的前端嵌入式数据透视表是非常简单的：
上图中的 PivotLayout 工作簿是数据透视表的页面，DataSource 是原始数据页面，图右侧的面板就是 SpreadJS 生成的数据透视面板，用户能够在这里调整所需的字段，从而扭转左侧数据透视表的展现信息。
在数据透视表中，存在四个区域:
- Filters: 控制数据透视表的数据范畴。
- Columns: 控制数据透视表的列散布。
- Rows: 控制数据透视表的行散布。
- Values: 控制数据透视表的计算数据和计算方法。
输出以下代码即可创立数据透视外表板:
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));用户必须为 ”panel” 元素设置宽和高。
GC.Spread.Pivot.PivotPanel 结构函数参数如下：
以下是应用规范 JS 代码嵌入数据透视表的 app.js 文件：
window.onload = function () {var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'),
{sheetCount: 2});
initSpread(spread);
var pivotLayoutSheet = spread.getSheet(0);
initPivotTable(pivotLayoutSheet);
};
function initSpread(spread) {spread.suspendPaint();
let sheet = spread.getSheet(1);
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1,4,0,2).formatter("$ #,##0");
sheet.setArray(0, 0, pivotSales);
let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
for(let i=2;i<=117;i++)
{sheet.setFormula(i-1,5,'=D'+i+'*E'+i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
let sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
spread.resumePaint();}
function initPivotTable(sheet) {let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField);
let groupInfo = {originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters}] };
myPivotTable.group(groupInfo);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();}
function _getElementById(id) {return document.getElementById(id);
}对应的 html 页面中退出的插件代码：
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>能够看到，总共 60 行左右的代码即可在一个 web 页面中嵌入数据透视表和透视表控制面板。
SpreadJS 除了反对规范 JS 代码外，还反对 Angular、Vue 和 React 框架。应用 Angular 时须要独自创立一个 app.component.html 页面，Vue 和 React 的 app 文件代码也会更长一些，并且要把插件导入的代码段放在 app 文件中。
此外，数据透视外表板只是一个控制数据透视表的工具，它在应用 fromJSON 时会主动开释。数据透视表能够在没有数据透视外表板的状况下工作。所以数据透视表反对上面的 api 来解决面板和数据透视表之间的关系。
将数据透视面板附加到数据透视表：
///* function attach(pivotTable: GC.Spread.Pivot.PivotTable) :void
/**
* @description this function will attach to a pivot table
* @param pivotTable
* @returns void
*/
attach (pivotTable: IPivotTable): void从数据透视表中拆散数据透视面板：
///* function attach(): void
/**
* @description this function will detach to a pivot table
* @returns void
*/
detach (): void销毁数据透视外表板：
///* function destroy (): void
/**
* @description destroy PivotPanel
*/
destroy (): void除了透视表，你的前端还能做到这些
SpreadJS 的弱小并非止于数据透视表。SpreadJS 是葡萄城联合 40 余年业余控件技术和在电子表格应用领域的教训而推出的纯前端表格控件，倒退到明天性能已成为性能足以与 Excel 相媲美的在线表格控件。SpreadJS 在界面和性能上与 Excel 高度相似，能够为企业信息化零碎提供 表格文档协同编辑、数据填报和类 Excel 报表设计的利用场景反对。应用 SpreadJS 可间接在 Angular、React、Vue 等前端框架中实现高效的模板设计、在线编辑和数据绑定等性能，为最终用户提供高度相似 Excel 的应用体验。
SpreadJS 应用时无需预装任何插件或第三方组件，具备晦涩的交互体验，并可间接在浏览器内导入导出 Excel、CSV、JSON 等文件。SpreadJS 兼容数百种 Excel 计算公式，内置 18 种条件格局、32 种图表、53 项单元格格局和 182 种形态，且反对触摸操作，具备纯中文界面。
值得一提的是，SpreadJS 在构建界面时并没有采取传统的 DOM 拼接形式，而是应用 HTML5 Canvas 绘制技术，在晋升性能的同时突破了 DOM 元素渲染对 UI 的诸多限度，实现了更精准的 UI 界面渲染成果。该技术已取得国家知识产权局颁发的创造专利证书。
在最新的 SpreadJS 15.0 Update 1 版本中，还退出了跨工作簿公式函数反对、日期切片器、Vue3 框架反对等更新内容。随着 SpreadJS 的不断更新和倒退，这款工具曾经成为古代企业在各类业务场景中实现在线 Excel 性能、随时随地满足数据处理、剖析和展现需要的最佳选项之一。点击以下链接可进一步理解 SpreadJS 的弱小能力，早日晋升企业数据生产力。
前端表格数据透视表在线示例：
https://demo.grapecity.com.cn…
葡萄城前端表格控件 SpreadJS
https://www.grapecity.com.cn/…
类 Excel 全栈解决方案：https://www.grapecity.com.cn/…