SpreadJS前端开发案例：如何利用Javasrcipt创建财务关键业绩指标表-控件新闻-慧都网

SpreadJS前端开发案例：如何利用Javasrcipt创建财务关键业绩指标表

转帖|使用教程|编辑：鲍佳佳|2021-01-04 10:27:58.757|阅读 102 次

概述：本示例展示了如何使用SpreadJS创建商业关键业绩指标表单, 例如财务关键业绩指标表单这个示例主要使用了公式，单元格格式和条件格式, 以及使用fromJSON加载预定义的模板。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

下面的示例展示了如何使用SpreadJS创建商业关键业绩指标表单, 例如财务关键业绩指标表单。

这个示例主要使用了公式，单元格格式和条件格式, 以及使用fromJSON加载预定义的模板。

注意，多个表单包含的数据是相互联系的。

app.js:

window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};

function initSpread(spread) {
var sd = data;
if (sd.length > 0) {
if (!spread) {
return;
}

spread.suspendPaint();
spread.fromJSON(sd[0]);
spread.resumePaint();
}
}

Index.html：

<!doctype html>
<html style="height:100%;font-size:14px;">

<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="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/financialKPIs.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div class="sample-tutorial">
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>

Style.css:

.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}

body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

选择SpreadJS的六大原因：

点击下载最新版SpreadJS

纯前端组件、跨平台应用嵌入：使用 SpreadJS 的功能，无需预装任何插件或第三方应用软件，可以原生的方式嵌入各类应用，与各类后端技术框架相结合，支持跨平台开发。

在线导入、导出Excel（xlsx）:无需任何后台代码和第三方组件！SpreadJS 可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作

业界领先的 Excel 兼容度：SpreadJS 支持 53 项单元格格式、18 种条件格式、32 种图表，可于 Web系统中轻松嵌入类Excel模块，实现如 Excel 般的数据分析和交互

极高的处理性能和响应速度：SpreadJS 使用稀疏数组(Sparse Array)作为数据存储结构，用 HTML5 图形(Canvas)绘制界面，可提供流畅的交互体验和出色的性能，并最大化节省存储空间。

一流的框架支持及二次扩展能力：基于原生 JavaScript，SpreadJS 全面兼容 Angular、 React、 Vue、TypeScript、Breeze 等前端开发框架，符合 UMD 规范，可按需加载，易于在 VSCode 中使用。

强大的公式计算引擎：SpreadJS 兼容 450 种以上的 Excel 公式函数，内置高效、可扩展的计算引擎，满足用户自定义公式、跨表格引用等多场景下的计算需求，轻松实现数据聚合，让有效数据不断完善

本篇文章你学会了吗！赶快下载体验吧！为庆祝慧都成立17周年。我们推出购正版送上万豪礼活动，界面开发工具正版授权最高直降10000+元，SpreadJS正版授权低至3490元！欢迎咨询慧都在线客服了解详情！

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：Grapecity

上一篇：程序授权托管解决方案IntelliLock关于GUI要素介绍下一篇：MindFusion.Diagramming for WinForms使用教程：使用Electron.js运行JavaScript图应用程序

在线采购

中文文档库

试用/Demo下载

开发社群

SpreadJS前端开发案例：如何利用Javasrcipt创建财务关键业绩指标表

用科技创就卓越

Create excellence with technology

在线采购

中文文档库

试用/Demo下载

开发社群

SpreadJS前端开发案例：如何利用Javasrcipt创建财务关键业绩指标表

为你推荐

用科技创就卓越

Create excellence with technology