将html中table内容转为电子表格导出

代码
效果图
在线测试

代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<title>导出表格内容html->.xls</title>
<body><table id="table_content" border="1" width="700px"><tr><td>编号</td><td>姓名</td></tr><tr><td>001</td><td>烟花</td></tr><tr><td>002</td><td>逍遥</td></tr><tr><td>003</td><td>墨蝶</td></tr></table><a id="output_table">导出</a><script>// 核心：拼接完整的html格式文档并填充数据//使用outerHTML属性获取整个table元素的HTML代码， 包括根标签<table></table>// 自定义封装html格式文档<html><head></head><body></body></html>// 设置字符集，告诉浏览器以utf8方式解析，避免乱码<meta charset='utf-8'/>// 获取table数据并填充到自定义的html格式文档中var table_content = document.querySelector("#table_content").outerHTML;var html = "<html><head><meta charset='utf-8' /></head><body>" + table_content + "</body></html>";// 实例化一个Blob对象，// param1：包含文件内容的数组，// param2：包含文件类型属性的对象var blob = new Blob([html], {type: "application/vnd.ms-excel"});var output_table = document.querySelector("#output_table");// 利用URL.createObjectURL()方法为a元素生成blob URLoutput_table.href = URL.createObjectURL(blob);// 设置文件名，低级浏览器不支持output_table.download = "学生信息表.xls";</script>
</body></html>

效果图

在线测试

https://lengyuexin.github.io/output/

学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

将html中table内容转为电子表格导出相关推荐

使用 iReport中table组件制作表格导出PDF
一.iReport安装 1.下载安装包: 2.直接按默认安装完成. 3.安装完成后iReport还不能启动,会闪退,请继续下面的操作 4.下载jdk_1.7并安装.注意:不需要配置jdk_1.7版本的 ...
vue中Table表格转为Excel文件的方法
首先要下载file-saver插件.xlsx插件和xlsx-style插件 npm install file-saver npm install xlsx npm install xlsx-style ...
java 更改excel文件名称_根据Excel文件中的内容，修改指定文件夹下的文件名称
问题:根据Excel文件中内容,把文件名称由第2列,改为第1列.比如:把文件"123.jpg"修改为"1.jpg". aaarticlea/png;base64 ...
java代码将excel文件中的内容列表转换成JS文件输出
思路分析我们想要把excel文件中的内容转为其他形式的文件输出,肯定需要分两步走: 1.把excel文件中的内容读出来: 2.将内容写到新的文件中. 举例一张excel表中有一个表格: 我们需要将 ...
Vue+ElementUi 项目中将页面内容转为 Word文档下载
Vue+ElementUi 项目中将页面内容转为 Word文档下载需要提前做好的现成模板(魔板个页面基本上相同的内容)-模板内有变量,替换成页面对应的数据 HTML页面: 转换的word 以下是正 ...
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
如何导出NK.bin中的内容
如何导出NK.bin中的内容收藏需要的工具:1.viewbin和cvrtbin:这两个是PB自带的工具,在\PUBLIC\COMMON\OAK\BIN\I386目录下. 2.dumprom:网上下 ...
div中的table内容过多时不超出div的范围解决方法
转载自 div中的table内容过多时不超出div的范围解决方法问题描述: 在做界面展示时,table的内容过多,超出div的大小,看着table的边框盖过了div的边框,不美观. 问题解决: ...
asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: 1 /// <summary> 2 /// HTML Table表格数据(html)导出EXCEL 3 /// </summary> 4 /// <param n ...

将html中table内容转为电子表格导出

将html中table内容转为电子表格导出

代码

效果图

在线测试

将html中table内容转为电子表格导出相关推荐

最新文章

热门文章