前端实现导出excel
结果：
将网页上拿到的数据导出成excel文件
实现：
HTML代码
<div>
<button type="button" onclick="exportExcel('tableExcel')">导出Excel</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">html导出的excel表格</td>
</tr>
<tr>
<td>列标题1</td>
<td>列标题2</td>
<td>类标题3</td>
<td>列标题4</td>
<td>列标题5</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
</tr>
<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
</tr>
</table>
</div>
JavaScript代码
<script>
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
console.log(explorer);
//ie
if (explorer.indexOf("Trident")>= 0) {
return 'ie';
//edge
}
else if(explorer.indexOf("Edge") >= 0) {
return 'Edge'
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
} function exportExcel(tableid) {
if(getExplorer()=='ie'){
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
// sel.select();
sel.execCommand("Copy");
oSheet.Paste();
oXL.Visible = true;
}else{
tableToExcel(tableid)
}
} var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
format = function(s, c) {
return s.replace(/{(\w+)}/g,
function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})();
</script>
运行结果：
注： 在edge浏览器下不能照常显示，各位看到的如果有好的想法可以告诉我哦，先谢谢啦
前端实现导出excel的更多相关文章
- # vue 如何通过前端来导出excel表格
在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...
- 前端 json 导出 excel
参考:https://blog.csdn.net/abel_yang/article/details/78684786 在github上有大神提供现成的插件,非常感谢 https://cuikangj ...
- js 前端 table 导出 excel
园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,st ...
- 前端自己导出Excel
1.导出当前页面,这是最简单的,只是导出当前页面的数据. exportData(tableid, name) { let table; let uri = 'data:application/vnd. ...
- vue项目，前端导出excel
今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- Atitit.导出excel功能的设计 与解决方案
Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
- 前端导出excel数据-jsonToExcel
咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...
随机推荐
- 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（7）- 从SD/eMMC启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRTxxx系列MCU的SD/eMMC卡启动. 关于 i.MXRT 启动设备,痞子衡之前写过很多篇文章,都是关于串并行 NO ...
- think php 登录日记
*/ public function save(Request $request) { // $params = $request->param(); $file = $request-> ...
- 28 面向对象编程 instanceof 代码 小结 父类引用指向子类对象
instanceof 代码 // main // Object > Person >Student Object object = new Student(); // 提取公式:XY之间是 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- CF809E题解
给定一个排列 \(a_i\) 和一棵树,求: \[\frac 1 {n(n-1)}\sum_{i=1}^n\sum_{j=1}^n \varphi(a_i \times a_j) \times dis ...
- Docker容器和虚拟机区别
Docker .虚拟机之间区别 虚拟机技术的缺点: 1.资源占用太多 2.冗余步骤多 3.启动很慢 容器化技术 1.服务器资源利用率高 2.比较轻量化 3.打包镜像测试,一键运行 比较Docker和虚 ...
- MyEclipse 05_连接mysql数据库进行增删改查
例子: 1.在数据库中建立如下表 2. 在MyEclipse里按本主博客文MyEclipse 03_jdbc连接数据库,注意数据库名要一致 运行后在Navicat里如下: 代码如下: package ...
- linux如何通过文件2，3找回文件1？
查看系统是否有diff,patch命令 diff一般系统自带 patch下载 (yum install patch -y) 现在开始演示 我的系统里有1和2两个文件 使用 diff 1 2 > ...
- IDEA版部署离线ArcGIS api for JavaScript
痛苦!折磨! 这两天发现IDEA 做ArcGIS api 开发比EClipse好用(重点是没有JS提示).但引入的ArcGIS api 一直报错,说找不到.这两天思来想去就是不知道为什么找不到loca ...
- AOP详解之三-创建AOP代理后记，创建AOP代理
AOP详解之三-创建AOP代理后记,创建AOP代理. 上篇文章已经获取到了AOP的信息,接下来就是拿着这些AOP的信息去创建代理了. 首先我们看下创建AOP代理的入口处. //这个方法将返回代理类 p ...