大家好，我是你们的好朋友程序猿:铭文

先简单的说下：领导给安排了一个活就是给导出excel，当时我的好朋友前端工程师他在的时候他搞的研究，研究过2个
版本。不过有一些小问题，导出的excel就是中国式报表有很多合并列的excel，和合并行的excel，后端搞得话都是一
般得npoi搞得方法。今天换2个搞得方法

一.前端页面获取页面H5。

ps:主要是获取了outerHTML，里面有注释非常得简单。不会得话没看明白得话私聊。

   <script>// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("Table标签ID").outerHTML + "</body></html>";// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象var blob = new Blob([html], {type: "application/vnd.ms-excel"});var info = document.getElementById("a 标签ID");// 利用URL.createObjectURL()方法为a元素生成blob URLinfo.href = URL.createObjectURL(blob);// 设置文件名，目前只有Chrome和FireFox支持此属性info.download = "Excel名字.xls";//打印具体实现代码function printout() {debugger;var newWindow;//打开一个新的窗口  newWindow = window.open();// 是新窗口获得焦点  newWindow.focus();//保存写入内容  var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"newContent += document.getElementById("Table标签ID").outerHTML;newContent += "</body></html>"// 将HTML代码写入新窗口中  newWindow.document.write(newContent);newWindow.print();// close layout stream newWindow.document.close();//关闭打开的临时窗口newWindow.close();return false;};</script>

二.用一个插件来写非常得简单：js-xlsx

链接: 下载地址.
官方github：连接地址.
xlsx.core.min.jsx（读取对象封装）
xlsx.full.min.js（包含了所有功能模块。）
JS-xlsx详细解释（这个人写的非常详细大家可以参考）：连接地址.
最后总结下：其实着2个第一个和第二个都是获取得前端得H5来进行得导出。也可以看看我第一个连接得下载地址：里面就是读取table节点下得tr，td 得这些属性。非常得简单。容易操作。不会的可以联系我欢迎你的咨询。

前端excel导出适应中国式复杂报表相关推荐

纯前端excel导出
文章目录背景技术选型 1.xlsx(`不满足`) 2.xlsx-style(`不推荐,后期问题太多`) 3.lay-excel(`推荐`) 一.准备内容数据二.准备表头数据三.认识lay-ex ...
js-xlsx 读取和导出excel实现前端 Excel 导出(支持多 sheet)
之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能,现在再介绍一下如何使用 js-xlsx 进行 excel 导出. [实现步骤] 1. 首先安装依赖 npm install xlsx ...
vue 实现前端excel导出表格携带token的两种方法
场景一:后端返回一个api接口,直接点击按钮就能下载Excel文件时: (1)不需要携带token  <el-lin ...
java 前端导出exvel_使用纯前端做的Excel导出了解一下
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这是我改造的前端Excel导出,需要引入jQuery插件[复制粘贴即可使用],各位不懂可以试一下.纯属练习使用JS标签方式将页面数据信息导出xlsx文件 ...
xlsx，xlsx-style file-saver ,vue3+vite4+Excel导出解决方案
文章目录前情提要应用场景实战解析前情提要应用场景最近在迁移一个vue2项目到vue3,过程真的很曲折,我希望可以帮其他的vue3开发者节省一些时间实战解析前端excel导出,并且希望有 ...
java excel 复杂表头_中国式复杂报表开发教程（4）—类Excel复杂表头报表
矩表控件出现之前,对于复杂表头的报表的实现,如多行表头嵌套,列单元格合并等,只能通过一些Look Like的方法来实现,并没有做到真正的底层实现来解决实质性的内容.复杂表头报表,甚至只能通过Table ...
帆软报表的excel导出，插件开发可用
当我们在插件开发的过程中,需要使用excel格式导出一些自己的数据,我们可以使用帆软报表内部的excel导出的相关代码,没必要去使用第三方框架来做excel导出. 通过研究帆软内部的excel导出的相 ...
前端表格导出为excel方法合集
前端表格导出为excel方法合集近来遇到了前端表格保存为excel的需求,通过查阅多方资料,总结了3种方法,下面一一进行展示,有不正确的地方,望指正.主要包括两种导出方法--纯前端导出和前端接收后端 ...
前端 - excel导入 / 导出功能
1. 导入功能 1.1 前端主导(工作大量在前端) 上传excel文件,把excel文件的内容读出来,还原成最基本的行列结构,按后端的接口要求回传过去. 前端读excel文件,调接口 1.2 后端主导 ...

前端excel导出适应中国式复杂报表

前端问题记录

大家好，我是你们的好朋友程序猿:铭文

一.前端页面获取页面H5。

二.用一个插件来写非常得简单：js-xlsx

前端excel导出适应中国式复杂报表相关推荐

最新文章

热门文章