前端导出&配置问题
<button class="search" onclick="method5('dataTable');">导出</button> 在表格内需要绑定相对应的id
js操作
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if(explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//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 method5(tableid) {
console.log(tableid)
if(getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible = true;
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
"Excel Spreadsheets (*.xls), *.xls");
} catch(e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel(tableid)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"'+
'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+'<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+'</x:ExcelWorkbook></xml><![endif]-->'+
' <style type="text/css">'+
'.excelTable {'+
'border-collapse:collapse;'+
' border:thin solid #999; '+
'}'+
' .excelTable th {'+
' border: thin solid #999;'+
' padding:20px;'+
' text-align: center;'+
' border-top: thin solid #999;'+
' background-color: #E6E6E6;'+
' }'+
' .excelTable td{'+
' border:thin solid #999;'+
' padding:2px 5px;'+
' text-align: center;'+
' }</style>'+
'</head><body ><table class="excelTable">{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) {
console.log(table)
if(!table.nodeType)
table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
var link = document.createElement("a");
link.href = uri+base64(format(template, ctx));
link.download = "信息发布情况表.xls";//当前下载的excel名称
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
})()
前端导出&配置问题的更多相关文章
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
- 纯前端导出pdf文件
纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...
- 前端导出csv
前端导出csv export: function(data, name) { // csv文件的BOM头 \ufeff可以让excel等识别出csv文件的编码 var uri = 'data:text ...
- 前端导出excel表
前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...
- 前端导出Excel
1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...
- js前端导出excel
此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...
- 踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...
- 【js-xlsx和file-saver插件】前端导出数据到excel
最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果.地址链接 ...
- 前端导出excel数据-jsonToExcel
咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...
随机推荐
- 【JZOJ4744】【NOIP2016提高A组模拟9.2】同余
题目描述 输入 输出 样例输入 5 2 1 5 2 3 7 1 3 2 1 2 5 3 0 样例输出 2 1 数据范围 解法 题目允许离线,且没有修改操作. 考虑把一个询问拆分成两个形如"a ...
- 【JZOJ4784】【NOIP2016提高A组模拟9.15】Map
题目描述 输入 输出 样例输入 4 4 2 1 2 2 3 3 2 3 4 1 2 1 4 样例输出 14 数据范围 样例解释 upd:保证原图连通. "不相交路径"的定义为不存在 ...
- jmeter的关联-正则表达式的应用
LoadRunnner中的关联为web_reg_save_param,查找左右边界,下次请求的时候会用到上次请求服务器返回的数据,那么我们把符合左右边界的数据保存下来,以便下次请求的时候用到. jme ...
- quarts之Cron表达式示例
cron表达式含义及范例如下: 字段名 允许的值 允许的特殊字符 秒 0- ...
- Libevent：8Bufferevents高级主题
本章描述的是Libevent的bufferevent实现的一些高级特性,这对于普通应用来说并非必须的.如果你只是学习如何使用bufferevent,则应该跳过本章去阅读evbuffer的章节. 一:成 ...
- phpexcel使用说明1
<?php /** * PHPEXCEL生成excel文件 * @author:firmy * @desc 支持任意行列数据生成excel文件,暂未添加单元格样式和对齐 */ require_o ...
- C++五：重载 多态
C++五:重载与多态 一:概述 多态是指同样的消息被不同类型的对象接收导致不同的行为,即接口的多种不同的实现方式.多态可分为静态多态与动态多态.多态类型可分为四类:重载多态,强制多态,包含多态,参 ...
- tp3 key json 分页
//json 强制转换为array $arr[$key]['checkpro'] = json_decode($val['checkpro'],JSON_FORCE_ARRAY); $arr[$ ...
- Python基础：24with语句
一:with语句 在Python 2.6 中正式引入的with语句,是用来简化代码的.这与用try-except 和try-finally所想达到的目的前后呼应.try-except 和try-fin ...
- @hdu - 5503@ EarthCup
目录 @description@ @solution@ @accepted code@ @details@ @description@ n 个队伍两两之间比赛,保证没有平局. 现在给出 n 个队伍分别 ...