整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
日常工作中，报表打印和导出为PDF是经常要处理的任务之一。除了方便我们将信息传达给同事和客户外，还可以让工作看起来更加专业、漂亮和规范，从而赢得领导和客户的信任和支持。
作为一名工作者，掌握高效的报表处理技巧对提高工作效率至关重要。其中，原生JS打印和导出报表为PDF技巧是一种非常实用、高效且普遍使用的方式。使用原生JS技巧，可以轻松完成报表处理的任务，避免使用繁琐的第三方库和软件，从而节省时间和金钱。掌握原生JS打印和导出报表为PDF技巧并不需要很高的前端开发技能，只需一些JS基础和DOM操作基础。
本文将向您介绍如何使用原生JS技巧打印和导出报表为PDF，并帮助解决在处理报表时可能遇到的问题和困难。
本文使用软件Visual Studio Code(以下简称“VSCode”)作为编程环境，请您以管理员身份运行它。
下图是一个简单的数据报表，并使用饼状图展示，右边两个按钮分别是打印报表（Print）和导出报表为Pdf（Export PDF）。分别点击这两个按钮实现报表打印和导出为Pdf。
(Demo运行界面)
（打印报表）
2.1创建工程文件
第一步在文件管理器中创建一个空白的文件夹作为工程并用VSCode打开。
第二步新建三个空白的文件（html文件、CSS文件和JS文件），名称可以任意取。
至此已经完成了创建工程文件，下面介绍JS的编写。
2.2编写JS文件
第一步添加表格中的数据信息。
function addTableContent (sheet) {
sheet.addSpan(1, 0, 1, 7);
//设置列高
sheet.setRowHeight(1, 40);
sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);、
//合并单元格
sheet.addSpan(2, 0, 1, 7);
sheet.setRowHeight(2, 30);
//获取指定表单区域中的指定单元格
sheet.getCell(2, 0).value("Family Business").font("18px Times").foreColor("#11114f").backColor("#f5f5f5").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(0, 105);
sheet.setRowHeight(3, 35);
sheet.getCell(3, 0).value("Costs Elements").font("Bold 15px Times").foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(1, 70);
sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(2, 70);}第二步添加饼状图。
//添加饼状图的方法
function addPieContent(sheet) {
//合并单元格
sheet.addSpan(12, 0, 1, 4);
//获取指定表单区域中的指定单元格
sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.addSpan(13, 0, 9, 4);
//在单元格中指定公式
sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")');
}第三步添加导出Pdf的方法。
window.onload=function () {
var spread=new spreadNS.Workbook(document.getElementById("ss"));
document.getElementById('savePDF').onclick=function () {
//下载pdf的方法
spread.savePDF(
function (blob) {
//设置下载pdf的文件名
saveAs(blob, 'download.pdf');
},
console.log,
{
title: 'Test Title',
author: 'Test Author',
subject: 'Test Subject',
keywords: 'Test Keywords',
creator: 'test Creator'
});
};
var sheet=spread.getActiveSheet();
sheet.suspendPaint();
var style=new GC.Spread.Sheets.Style();
//设置字体大小
style.font='15px Times';
sheet.setDefaultStyle(style);
//添加表格内容
addTableContent(sheet);
//添加饼图
addPieContent(sheet);
var printInfo=sheet.printInfo();
//showBorder是否打印控件的外边框线
printInfo.showBorder(true);
//showGridLine是否打印网格线
printInfo.showGridLine(true);
//headerCenter是否打印表头中心
printInfo.headerCenter("Family Business Costs");
printInfo.headerLeft("&G");
printInfo.footerCenter("&P/&N");
}第四步添加打印报表的方法。
window.onload=function () {
//打印的方法
document.getElementById('btnPrint').onclick=function () {
// used to adjust print range, should set with printInfo (refer custom print for detail)
spread.sheets[0].setText(31, 8, " ");
spread.print();
};
sheet.resumePaint();
};至此已经完成了JS文件的引入，下面介绍CSS的编写。
2.3编写CSS文件
第一步添加按钮的CSS格式。
input {
padding: 8px 14px;
display: block;
}第二步添加选项容器和表格的CSS格式。
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}第三步添加选项行、示例教程和主体的CSS样式。
input {
padding: 8px 14px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}至此已经完成了CSS文件的引入，下面介绍Html文件的编写。
2.4编写Html文件
第一步引入表格、导出Pdf和打印报表的资源。
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入SpreadJS相关的CSS,默认会有一个CSSSpreadJS默认提供了7种CSS，可以选择一个适合当前项目的引入-->
<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/spread/source/js/FileSaver.js" type="text/javascript"></script>
<!-- 打印相关资源 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<!--PDF相关资源-->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.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>
</head>第二步引入导出Pdf和打印报表的按钮
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p>Click this button to export the Spread component to a PDF file.</p>
<div class="option-row">
<!--导出Pdf按钮-->
<input type="button" style="height: 70px;" value="Export PDF" id="savePDF">
<hr>
<!--打印按钮-->
<input type="button" style="height: 70px;" value="Print" id="btnPrint">
</div>
</div>
</div>
</body>2.5运行代码
在运行前需要下载并安装一个插件：Live Server。
(Live Server插件）
安装完插件后需要重启VSCode软件，然后在Html文件中右键点击Open With The Live Server(以浏览器打开)便可运行。
除了JavaScript的使用，还可以在流行的框架如Vue、React中引入打印和导出Pdf功能，不仅如此，还可实现许多花样操作，如数据绑定和单元格透视等，让表格更具交互性和易用性。
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下: 如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘) 前端如何基于table中的数据一键生成多维度数据可视化分析报表 * 如何实现会员管理系统下的权限路由和权限菜单
以上场景也是前端工程师在开发后台管理系统中经常遇到的或者即将遇到的问题, 本文是上述介绍中的第一篇文章, 你将收获: 使用JavaScript实现前端导入excel文件并自动生成可编辑的Table组件 使用JavaScript实现前端基于Table数据一键导出excel文件 * XLSX和js-export-excel基本使用
本文接下来的内容素材都是基于H5可视化编辑器(H5-Dooring)项目的截图, 如果想实际体验, 可以访问H5-Dooring网站实际体验. 接下来我们直接开始我们的方案实现.
在开始实现之前, 我们先来看看实现效果.
导入excel文件并通过antd的table组件渲染table:
编辑table组件:
保存table数据后实时渲染可视化图表:
以上就是我们实现导入excel文件后, 编辑table, 最后动态生成图表的完整流程.
导入excel文件的功能我们可以用javascript原生的方式实现解析, 比如可以用fileReader这些原生api,但考虑到开发效率和后期的维护, 笔者这里采用antd的Upload组件和XLSX来实现上传文件并解析的功能. 由于我们采用antd的table组件来渲染数据, 所以我们需要手动将解析出来的数据转换成table支持的数据格式.大致流程如下:
所以我们需要做的就是将Upload得到的文件数据传给xlsx, 由xlsx生成解析对象, 最后我们利用javascript算法将xlsx的对象处理成ant-table支持的数据格式即可. 这里我们用到了FileReader对象, 目的是将文件转化为BinaryString, 然后我们就可以用xlsx的binary模式来读取excel数据了, 代码如下:
// 解析并提取excel数据
let reader=new FileReader();
reader.onload=function(e) {
let data=e.target.result;
let workbook=XLSX.read(data, {type: 'binary'});
let sheetNames=workbook.SheetNames; // 工作表名称集合
let draftObj={}
sheetNames.forEach(name=> {
// 通过工作表名称来获取指定工作表
let worksheet=workbook.Sheets[name];
for(let key in worksheet) {
// v是读取单元格的原始值
if(key[0] !=='!') {
if(draftObj[key[0]]) {
draftObj[key[0]].push(worksheet[key].v)
}else {
draftObj[key[0]]=[worksheet[key].v]
}
}
}
});
// 生成ant-table支持的数据格式
let sourceData=Object.values(draftObj).map((item,i)=> ({ key: i + '', name: item[0], value: item[1]}))
经过以上处理, 我们得到的sourceData即是ant-table可用的数据结构, 至此我们就实现了表格导入的功能.
table表格的编辑功能实现其实也很简单, 我们只需要按照antd的table组件提供的自定义行和单元格的实现方式即可. antd官网上也有实现可编辑表格的实现方案, 如下:
大家感兴趣的可以研究一下. 当然自己实现可编辑的表格也很简单, 而且有很多方式, 比如用column的render函数来动态切换表格的编辑状态, 或者使用弹窗编辑等都是可以的.
根据table数据动态生成图表这块需要有一定的约定, 我们需要符合图表库的数据规范, 不过我们有了table数据, 处理数据规范当然是很简单的事情了, 笔者的可视化库采用antv的f2实现, 所以需要做一层适配来使得f2能消费我们的数据.
还有一点就是为了能使用多张图表, 我们需要对f2的图表进行统一封装, 使其成为符合我们应用场景的可视化组件库.
我们先看看f2的使用的数据格式:
const data=[
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
此数据格式会渲染成如下的图表:
所以说我们总结下来其主要有2个纬度的指标, 包括它们的面积图, 饼图, 折线图, 格式都基本一致, 所以我们可以基于这一点封装成组件的可视化组件, 如下:
import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';
import ChartImg from '@/assets/chart.png';
import styles from './index.less';
import { IChartConfig } from './schema';
interface XChartProps extends IChartConfig {
isTpl: boolean;
}
const XChart=(props: XChartProps)=> {
const { isTpl, data, color, size, paddingTop, title }=props;
const chartRef=useRef(null);
useEffect(()=> {
if (!isTpl) {
const chart=new Chart({
el: chartRef.current || undefined,
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// step 2: 处理数据
const dataX=data.map(item=> ({ ...item, value: Number(item.value) }));
// Step 2: 载入数据源
chart.source(dataX);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
.interval()
.position('name*value')
.color('name');
// Step 4: 渲染图表
chart.render();
}
}, [data, isTpl]);
return (
<div className={styles.chartWrap}>
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
{title}
</div>
{isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
</div>
);
};
export default memo(XChart);
当然其他的可视化组件也可以用相同的模式封装,这里就不一一举例了. 以上的组件封装使用react的hooks组件, vue的也类似, 基本原理都一致.
同样的, 我们实现将table数据一键导出为excel也是类似, 不过方案有所不同, 我们先来看看在Dooring中的实现效果.
以上就是用户基于后台采集到的数据, 一键导出excel文件的流程, 最后一张图是生成的excel文件在office软件中的呈现.
一键导出功能主要用在H5-Dooring的后台管理页面中, 为用户提供方便的导出数据能力. 我们这里导出功能也依然能使用xlsx来实现, 但是综合对比了一下笔者发现有更简单的方案, 接下来笔者会详细介绍, 首先我们还是来看一下流程:
很明显我们的导出流程比导入流程简单很多, 我们只需要将table的数据格式反编译成插件支持的数据即可. 这里笔者使用了js-export-excel来做文件导出, 使用它非常灵活,我们可以自定义: 自定义导出的excel文件名 自定义excel的过滤字段 * 自定义excel文件中每列的表头名称
由于js-export-excel支持的数据结构是数组对象, 所以我们需要花点功夫把table的数据转换成数组对象, 其中需要注意的是ant的table数据结构中键对应的值可以是数组, 但是js-export-excel键对应的值是字符串, 所以我们要把数组转换成字符串,如[a,b,c]变成'a,b,c', 所以我们需要对数据格式进行转换, 具体实现如下:
const generateExcel=()=> {
let option={}; //option代表的就是excel文件
let dataTable=[]; //excel文件中的数据内容
let len=list.length;
if (len) {
for(let i=0; i<len; i++) {
let row=list[i];
let obj:any={};
for(let key in row) {
if(typeof row[key]==='object') {
let arr=row[key];
obj[key]=arr.map((item:any)=> (typeof item==='object' ? item.label : item)).join(',')
}else {
obj[key]=row[key]
}
}
dataTable.push(obj); //设置excel中每列所获取的数据源
}
}
let tableKeys=Object.keys(dataTable[0]);
option.fileName=tableName; //excel文件名称
option.datas=[
{
sheetData: dataTable, //excel文件中的数据源
sheetName: tableName, //excel文件中sheet页名称
sheetFilter: tableKeys, //excel文件中需显示的列数据
sheetHeader: tableKeys, //excel文件中每列的表头名称
}
]
let toExcel=new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下载excel文件
}
注意, 以上笔者实现的方案对任何table组件都使用, 可直接使用以上代码在大多数场景下使用. 至此, 我们就实现了使用JavaScript实现前端导入和导出excel文件的功能.
所以, 今天你又博学了吗?
以上教程笔者已经集成到H5-Dooring中，对于一些更复杂的交互功能，通过合理的设计也是可以实现的，大家可以自行探索研究。
地址：H5-Dooring | 一款强大的H5编辑器
如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。
avaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。
Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。
作为全球领先的软件开发技术和低代码平台提供商，葡萄城专注开发技术和工具已经长达四十余年，一直以来引领着国内控件技术和数据分析工具的发展。SpreadJS表格控件作为葡萄城的核心产品，能够完美兼容 Excel 的功能和使用体验并高度匹配在线办公场景的需求。
SpreadJS可以为我们的Web应用提供更好的交互体验，以及更灵活的权限控制、数据整合、数据可视化、战略绩效测量 (SPM)、复杂的统计分析等。多年来，Excel 兼容性一直是SpreadJS最重要的功能之一。
SpreadJS 提供了熟悉的 Excel 电子表格界面。用户可以通过SpreadJS直接在页面端导入和导出 Excel 文件——这一切无需依赖 Excel。
在本博客中，我们将介绍如何按照以下步骤在 JavaScript 中，实现页面端电子表格导入/导出到 Excel：
1. 设置 JavaScript 电子表格项目
2. 添加 Excel 导入代码
3. 将数据添加到导入的 Excel 文件
4. 添加迷你图
5. 添加 Excel 导出代码
首先，我们可以使用托管在 NPM 上的 SpreadJS 文件。为此，我们可以使用命令行参数进行安装。打开命令提示符并导航到应用程序的位置。在那里，您可以使用一个命令安装所需的文件。
在这种情况下，我们需要基本的 Spread-Sheets 库、Spread-ExcelIO 和 jQuery：
npm i @grapecity/spread-sheets @grapecity/spread-excelio jquerySpreadJS 不依赖于 jQuery，但在这种情况下，我们使用它来提供简单的跨域请求支持，稍后我们将对其进行回顾。
一旦安装了这些，我们就可以在我们的代码中添加对这些脚本和 CSS 文件的引用：
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS ExcelIO</title>
<script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script><link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script></head>
<body>
<div id="ss" style="height:600px; width :100%; "></div>
</body>
</html>除了 SpreadJS 和 jQuery 文件之外，我们还需要导入 FileSaver 库，为了便于后续程序处理，SpreadJS默认提供完整的文件流，FileSaver库可以用来把文件流转成文件下载到本地。
然后我们可以在页面中添加一个脚本来初始化 Spread.Sheets 组件和一个 div 元素来包含它（因为 SpreadJS 电子表格组件使用了一个画布，这是初始化组件所必需的）：
<script type="text/javascript">
$(document).ready(function () {
var workbook=new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
});
</script>
</head>
<body>
<div id="ss" style="height:600px ; width :100%; "></div>
</body>我们需要创建一个客户端 ExcelIO 组件的实例，我们可以使用它来打开文件：
var excelIO=new GC.Spread.Excel.IO();然后我们需要添加一个函数来导入文件。在此示例中，我们导入了一个本地文件，但您可以对服务器上的文件执行相同的操作。如果从服务器导入文件，您需要引用该位置。下面是一个输入元素的示例，用户可以在其中输入文件的位置：
<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />一旦你有了它，你可以直接在脚本代码中访问该值：
var excelUrl=$("#importUrl").val();导入函数的以下代码使用“excelUrl”变量的本地文件：
function ImportFile() {
var excelUrl="./test.xlsx";
var oReq=new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType='blob';
oReq.onload=function () {
var blob=oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData=json;
workbook.fromJSON(json);
workbook.setActiveSheet("Revenues (Sales)");
}无论您是在服务器上还是在本地引用文件，都需要在 $(document).ready 函数内的脚本中添加以下内容：
$(document).ready(function () {
$.support.cors=true;
workbook=new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});在这种情况下，我们需要启用 Cross-Origin-Request-Support，因为我们可能会从 URL 加载文件。因此 $.support.cors=true;行，否则尝试加载它会导致 CORS 错误。
我们使用本教程的“损益表”Excel 模板导入本地文件。
现在我们可以使用 Spread.Sheets 脚本在这个文件中添加另一个收入行。让我们在页面上添加一个按钮来执行此操作：
<button id="addRevenue">Add Revenue</button>我们可以为该按钮的单击事件处理程序编写一个函数来添加一行并从前一行复制样式以准备添加一些数据。要复制样式，我们需要使用 copyTo 函数并传入：
1. 原始和目标行和列索引
2. 行数和列数
3. 样式的 CopyToOptions 值
document.getElementById("addRevenue").onclick=function () {
var sheet=workbook.getActiveSheet();
sheet.addRows(newRowIndex, 1);
sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);
}以下用于添加数据和 Sparkline 的脚本代码将包含在此按钮单击事件处理程序中。对于大部分数据，我们可以使用 setValue 函数。这允许我们通过传入行索引、列索引和值来在 Spread 中的工作表中设置值：
sheet.setValue(newRowIndex, 1, "Revenue 8");
for (var c=3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}在 P 列中设置 SUM 公式以匹配其他行并为 Q 列设置百分比：
sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(newRowIndex, 16, 0.15);最后，我们可以再次使用 copyTo 函数将先前行中的公式复制到 R 到 AD 列的新行，这次使用 CopyToOptions.formula：
sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);现在，我们可以添加迷你图来匹配其他数据行。为此，我们需要提供一系列单元格以从中获取数据以及迷你图的一些设置。在这种情况下，我们可以指定：
1. 单元格的范围，我们只是将数据添加到
2. 使迷你图看起来像同一列中的其他迷你图的设置
var data=new GC.Spread.Sheets.Range(11, 3, 1, 12);
var setting=new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor="Text 2";
setting.options.lineWeight=1;
setting.options.showLow=true;
setting.options.showHigh=true;
setting.options.lowMarkerColor="Text 2";
setting.options.highMarkerColor="Text 1";之后，我们调用 setSparkline 方法并指定：
1. 迷你图的位置
2. 数据的位置
3. 迷你图的方向
4. 迷你图的类型
5. 我们创建的设置
sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);如果您现在尝试运行代码，它可能看起来有点慢，因为每次更改数据和添加样式时工作簿都会重新绘制。为了显着加快速度并提高性能，Spread.Sheets 提供了暂停绘画和计算服务的能力。让我们在添加一行及其数据之前添加代码以暂停两者，然后在之后恢复两者：
workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();添加该代码后，我们可以在 Web 浏览器中打开该页面，并查看 Excel 文件加载到 Spread.Sheets 中并添加了收入行。重要提示：请记住，出于安全考虑，Chrome 不允许您打开本地文件，因此您需要使用 Firefox 等网络浏览器才能成功运行此代码。或者，从网站 URL 加载文件应该可以在任何浏览器中正常打开。
最后，我们可以添加一个按钮来导出包含添加行的文件。为此，我们可以使用 Spread.Sheets 中内置的客户端 ExcelIO 代码：
function ExportFile() {
var fileName=$("#exportFileName").val();
if (fileName.substr(-5, 5) !=='.xlsx') {
fileName +='.xlsx';
}
var json=JSON.stringify(workbook.toJSON());
excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
if (e.errorCode===1) {
alert(e.errorMessage);
}
});
}该代码从 exportFileName 输入元素获取导出文件名。我们可以定义它并让用户像这样命名文件：
<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />然后我们可以添加一个按钮来调用这个函数：
<button id="export">Export File</button>
document.getElementById("export").onclick=function () {
ExportFile();
}添加收入行后，您可以使用“导出文件”按钮导出文件。确保添加 FileSaver 外部库以允许用户将文件保存在他们想要的位置：
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>成功导出文件后，您可以在 Excel 中打开它，并查看文件与导入时的外观相同，只是现在我们添加了额外的收入行。
这只是一个示例，说明如何使用 SpreadJS JavaScript 电子表格将数据添加到 Excel 文件，然后使用简单的 JavaScript 代码将它们导出回 Excel。
*请认真填写需求信息，我们会在24小时内与您取得联系。
