js导出excel表格兼容性(表格报错原因及解决方案) 长城号SEO专员 • 2024年2月7日 下午5:12 • 问答百科 一、SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗、纯前端、零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发,为终端用户带来亲切的 Excel 体验。 本文将以 xlsx 文件格式为例,展示如何使用 SpreadJS 实现前端导入和导出excel文件。 SpreadJS 官网 本文在线Demo示例 导入导出Excel视频演示 1. 主要功能 a. 功能、UI 与 Excel 高度类似 b. 兼容 450 种以上的 Excel 公式 c. 符合 UMD 规范,可按需加载 d. 完善的数据可视化,支持形状、图表、迷你图 e. 纯前端导入、导出 Excel 文件 f. 使用 HTML5 图形(Canvas)绘制界面,具备高性能和响应速度 2. 安装包目录结构 ├── Spread.Sheets SpreadJS产品包 │ └── Designer SpreadJS 表格设计器 │ ├── Spread.Sheets-Designer.12.0.0.AppImage [Mac] │ ├── Spread.Sheets-Designer.12.0.0.dmg [Linux] │ └── Spread.Sheets-Designer.12.0.0 [Windows] │ └── Spread.Sheets.Docs.12.0.0 SpreadJS 表格接口文档 │ ├── content │ └── index │ └──Spread.Sheets.Release.12.0.0 SpreadJS 表格 JavaScript 库/演示用例 │ ├── css 样式文件 │ ├── definition TS 引用文件 │ ├── readme │ ├── samples 示例代码(包括原生JS,Angular,Vue,React) │ ├── scripts JS文件 │ ├── GrapeCity-EULA │ └── LICENSE 3. 如何使用 a. Spread.Sheets不依赖任何第三方组件。它只需要引用下列文件: gc.spread.sheets.xx.x.x.css,gc.spread.sheets.all.xx.x.x.min.js。 <link rel=”styleSheet” href=”gc.spread.sheets.xx.x.x.css” /> <script src=”gc.spread.sheets.all.xx.x.x.min.js” type=”text/javascript”></script> <script src=”gc.spread.sheets.resources.zh.xx.x.x.min.js” type=”text/javascript”></script> b. 在页面的body元素中添加一个DOM元素作为它的容器。 <div id=”ss” style=”width:100%; height:360px;border: 1px solid gray;”></div> c. 用代码“new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’), { sheetCount: 1 })”来初始化Spread。 window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’), { sheetCount: 1 }); }; 二、前端导入导出Excel 实现前端导入导出只需要引入 gc.spread.excelio 库,使用 excelIO.open 和 excelIO.save 两个方法即可,不需要配置任何选项,代码十分简洁易懂。 前端导入导出支持将 Spread json 导出为excel文件(.xlsx)和将 excel 文件导入为 Spread json. 使用前端导入导出, 你需要将相关的js文件添加的 document 的 head 区域。例如: <head> … <script src=’…/spreadjs/gc.spread.sheets.all.x.xx.xxxxx.x.min.js’ type=’text/javascript’></script> <script src=’…/spreadjs/plugins/gc.spread.excelio.x.xx.xxxxx.x.min.js’ type=’text/javascript’></script> </head> 初始化 Workbook 实例和 ExcelIO 实例: var spread = new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’)); var excelIo = new GC.Spread.Excel.IO(); 接下来你就可以使用 open 方法将 excel 文件导入为 spread json,使用 save 方法将 spread json 导出为excel文件。例如: //import excel file to Spread.Sheets json excelIo.open(excelFile, function (json) { var workbookObj = json; workbook.fromJSON(workbookObj); }, function (e) { // process error console.log(e); }); //export Spread.Sheets json to excel file excelio.save(json, function (blob) { //do whatever you want with blob //such as you can save it }, function (e) { //process error console.log(e); }); 同时,你还可打开或保存一个带有密码保护的 excel 文件,只需要在 open 和 save 方法中传入参数 options{password:xxxx} 即可。例如: //import excel file to Spread.Sheets json excelIo.open(excelFile, function (json) { var workbookObj = json; workbook.fromJSON(workbookObj); }, function (e) { // process error console.log(e); },{password:xxxx}); //export Spread.Sheets json to excel file excelio.save(json, function (blob) { //do whatever you want with blob //such as you can save it }, function (e) { //process error console.log(e); },{password:xxxx}); 前端导入导出 Excel 的示例源码及数据源下载: 示例源码:ExcelIO.html 数据源文件:excel_data.js 三、处理单元格合并 一般来说,前端生成 excel 而不是 csv,其最主要的原因都是为了解决 csv 不能实现单元格合并的问题,假设我们要生成带有单元格格式的 Excel 文件,也可以通过 SpreadJS 内置属性实现: 调用 addSpan 方法来合并指定区域的单元格, 以此来构建一个新的更大的单元格, 参见以下示例代码: // Merge cells and set label sheet.addSpan(1, 4, 1, 7); sheet.setValue(1, 4, “Goods”); // Merge cells across multi rows (3) and columns (4) sheet.addSpan(20, 1, 3, 4); sheet.getCell(20, 1).value(“Demo”).hAlign.vAlign; 调用 removeSpan 方法来分解指定包含合并的单元格: sheet.removeSpan(20, 1); Workbook的 allowUserDragMerge 选项表明是否允许通过鼠标拖拽来合并单元格。把 allowUserDragMerge 改为 true,在选择区域边缘处会出现一个特殊的标记。 // default value is false spread.options.allowUserDragMerge = true; 备注: 确定你要展现在合并单元格中的信息在合并前处于合并区域的最左上单元格, 合并单元格中的其他单元格信息将被隐藏, 直到合并信息被分解(与 Excel 相同)。 处理单元格合并的示例源码及数据源下载:cellSpan.html 四、自定义 Excel 的文件样式 Spread.Sheets 提供一个样式的类, 其中包含很多可配置属性, 如前景色、背景色等。 你可以通过这些属性,构造一个样式并设置不同的参数, 示例代码如下: var style = new GC.Spread.Sheets.Style(); style.backColor = ‘red’; style.foreColor = ‘green’; style.isVerticalText = ‘true’; 同样,你也可以将此样式设置给单元格, 行, 或者列: //set style to cell. sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport); //set style to row. sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport); //set style to column. sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport); 样式在不同的层级结构中具有不同的优先级别: 单元格 > 行 > 列。 Spread.Sheets 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。 你可以构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中,如: var style = new GC.Spread.Sheets.Style(); style.name = ‘style1’; style.backColor = ‘red’; //add to sheet’s named style collection. sheet.addNamedStyle(style); //add to spread’s named style collection. spread.addNamedStyle(style) 当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它: sheet.getNamedStyle(‘style1’); spread.getNamedStyle(‘style1’) 如果名称样式不再使用, 你也可以将其从名称集合中删除掉: sheet.removeNamedStyle(‘style1’); spread.removeNamedStyle(‘style1’) 自定义Excel文件样式的示例源码:style.html 五、数据绑定 Spread.Sheets 支持绑定数据源到表单(绑定类型有表单级别绑定和单元格级别绑定两种。) 你可以使用 setDataSource 和 getDataSource 方法来设置获取数据源。 在设置数据源之前, 你可以使用 autoGenerateColumns 方法来控制是否自动生成绑定列。 例如: var customers = [ { ID:0, Name:’A’, Info1:’Info0′ }, { ID:1, Name:’B’, Info1:’Info1′ }, { ID:2, Name:’C’, Info1:’Info2′ }, ]; sheet.autoGenerateColumns = true; sheet.setDataSource(customers); 你也可以使用 getDataItem 方法来获取指定行的数据信息。 你按照如下方式将数据字段绑定到指定的列: var datasource = [ { name: ‘Alice’, age: 27, birthday: ‘1985/08/31’, position: ‘PM’ } ]; // bindColumn one by one var nameColInfo = { name: ‘name’, displayName: ‘Display Name’, size: 70 }; var ageColInfo = { name: ‘age’, displayName: ‘Age’, size: 40, resizable: false }; var birthdayColInfo = { name: ‘birthday’, displayName: ‘Birthday’, formatter: ‘d/M/yy’, size: 120 }; var positionColInfo = { name: ‘position’, displayName: ‘Position’, size: 50, visible: false }; sheet.autoGenerateColumns = false; sheet.setDataSource(datasource); sheet.bindColumn(0, nameColInfo); sheet.bindColumn(1, birthdayColInfo); sheet.bindColumn(2, ageColInfo); sheet.bindColumn(3, positionColInfo); // or use bindColumns to bind all custom columns var colInfos = [ { name: ‘position’, displayName: ‘Position’, size: 50, visible: false }, { name: ‘name’, displayName: ‘Display Name’, size: 70 }, { name: ‘birthday’, displayName: ‘Birthday’, formatter: ‘d/M/yy’, size: 120 }, { name: ‘age’, displayName: ‘Age’, size: 40, resizable: false }, ]; sheet.autoGenerateColumns = false; sheet.setDataSource(datasource); sheet.bindColumns(colInfos); 数据绑定的示例源码:sheetLevelBinding.html 以上就是使用 SpreadJS,实现前端导入和导出 excel 文件的具体步骤和示例代码,其他如 Excel 公式、图表、条件格式、JSON 序列化与反序列化、状态栏等功能,可以在 SpreadJS 官网了解更多。 点击了解更多可查看本文在线 DEMO 示例。 关于葡萄城 赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ivillcn@qq.com 举报,一经查实,本站将立刻删除。文章链接:https://www.shangraobbs.com/n/2913.html 赞 (0) 长城号SEO专员普通用户 0 0 生成海报 ps如何去黑眼圈眼袋(ps瘦脸教程三种方法) 上一篇 2024年2月7日 下午5:06 智能营销云营销缺点(智能营销的八大特点) 下一篇 2024年2月7日 下午5:16 相关推荐 问答百科 杭州注册公司步骤(注册小微企业每年费用) 杭州注册公司已逐步实现“全流程”,也就是全程网上操作,足不出户即可注册公司,执照邮寄到家。下面,主要介绍一下2022年杭州“全流程”注册公司流程: 一、公司核名:一般要准备3-5个... 刘英 2023年11月27日 000 问答百科 兼职外包协议范文(业务外包方案模板) 劳务外包服务协议书 甲方(发包单位全称): 项目负责人: 乙方(接包单位全称): 项目负责人: 甲乙双方依据《中华人民共和国合同法》的有关规定,根据平等自愿、诚实信用、互利互惠的原... 长城号SEO专员 2023年12月31日 000 问答百科 java数据结构有哪些(java常见的8种数据结构) Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类: 枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack)... 刘英 2023年12月3日 000 端午节的习俗有哪些(关于端午节的来源与风俗详解) 对于端午节的来历你知道多少呢?估计大多数人都认为端午节是为了纪念屈原的,关于端午节的来源,时至今日至少有四、五种说法,诸如:纪念屈原说;吴越民族图腾祭说;起于三代夏至节说;恶月恶日... Feeling tone 2023年8月18日 • 问答百科 000 问答百科 myeclipse添加jdk版本(分享详细安装步骤) 建议使用jdk7+tomcat7+myeclipse2014组合 学习一门新语言的时候,可能最麻烦的就是配置环境了,之前没有按照教程配置的环境myecplise直接不行,所以重新安... 刘英 2024年2月9日 000 问答百科 家用光纤接头接法图解(超详细的图解过程) 针对光纤入户如何布线以及如何接线,我结合自己的工作经验做个简单分享。 1、弱电箱选择弱电箱作为家庭的网络集中点,光猫和路由器等重要设备都是放在弱电箱内,弱电箱在选择的时候建议选择尺... 刘英 2023年12月10日 000 问答百科 小可爱是什么意思(网络用语“小可爱”的含义) 网络用语“小可爱”的含义 1、在网络上小可爱是用来代替骂人的词的,意思是说别人太幼稚、太天真,甚至更加难听的话,比如抖音和快手等平台会把很多骂人的词屏蔽掉,还有些作者怕被举报,于是... Feeling tone 2023年11月4日 000 问答百科 模拟微信聊天生成器(分享在线微信转账生成器) 分享一个自娱自乐的制图工具,你可以用它轻松生成各类搞笑对话手机截图… 刚过不久的七夕,刷了一遍朋友圈是否看到很多微信秀恩爱的聊天截图、各种520转账的截图呢?如果你想要这样的截图,... 刘英 2023年11月19日 000 问答百科 什么小吃最火爆最赚钱(哪种小吃最赚钱吃又简单又赚钱) 疫情当下,赚钱不易,盘点下当前最火爆的几种网红小吃,感兴趣的可以去摆个小摊试试,挣点外快吧: 1铁板鱿鱼 铁板鱿鱼做法简单,用铁板把鱿鱼煎熟后,铁铲切断,撒上特制酱即可,原料主要是... Feeling tone 2023年8月19日 000 房地产项目进度计划表(施工进度计划表范本) 进度管理是项目管理过程的一个普通应用,很好掌握进度状况,可以对整个项目发展有一个全面掌握,对于任何事情的发展,都要有一个全面了解,特别是很重要的事情。 如果对进度没有很好掌握,那么... 刘英 2024年1月6日 • 问答百科 000 发表回复 您的电子邮箱地址不会被公开。 必填项已用*标注*昵称: *邮箱: 网址: 记住昵称、邮箱和网址,下次评论免输入 提交