前端导出excel兼容IE和主要浏览器

前端导出excel所见即所得,比较简单,代码送上

1.页面调用

<a class="img-button margin_r_5" href="javascript:void(0)" id="reportToExcel" onclick="javascript:table2excel('reportGrid')"><em class="ico16 export_excel_16"></em>导出Excel</a>
//点击的时候打开table2excel方法

其中里面的参数我放的是table里面的ID,总之能找到table就行

2.script

<script type="text/javascript">var idTmr;//判断浏览器function getExplorer() {var explorer = window.navigator.userAgent;//ieif (explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 10.0;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)) {return 'ie'; //ie}//firefoxelse if (explorer.indexOf("Firefox") >= 0) {return 'Firefox';}//Chromeelse if (explorer.indexOf("Chrome") >= 0) {return 'Chrome';}//Operaelse if (explorer.indexOf("Opera") >= 0) {return 'Opera';}//Safarielse if (explorer.indexOf("Safari") >= 0) {return 'Safari';}}//iefunction table2excel(tableid) { //整个表格拷贝到EXCEL中debugger;if (getExplorer() == 'ie') {var curTbl = document.getElementById(tableid); //ie不兼容jq的写法,这里只能这么获取,用jq写法,显示参数无效var oXL;try{oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel}catch(e){alert("无法启动Excel!请修改ie配置\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");return false;}var oWB = oXL.Workbooks.Add(); //获取workbook对象var oSheet = oWB.ActiveSheet;//激活当前sheetvar sel = document.body.createTextRange();sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中sel.select(); //全选TextRange中内容sel.execCommand("Copy");//复制TextRange中内容oSheet.Paste();//粘贴到活动的EXCEL中oXL.Visible = true; //设置excel可见属性var fname = oXL.Application.GetSaveAsFilename("将table导出到excel.xls", "Excel Spreadsheets (*.xls), *.xls");oWB.SaveAs(fname);oWB.Close();oXL.Quit();} else {debugger;tableToExcel(tableid)}}function Cleanup() {window.clearInterval(idTmr);CollectGarbage();}/* 其他浏览器导出excel代码 */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]--></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) {//输出table内容table = $($("#reportGrid")).prop("outerHTML")//jq找到table里面的内容即可var ctx = {worksheet : name || 'sheet1',table : table}window.location.href = uri + base64(format(template, ctx))}})()</script>

总得来说还是比较方便的!!!

前端导出excel兼容IE和主要浏览器相关推荐

vue基于Blob.js和Export2Excel.js做前端导出excel兼容ie
这里简单的说一下兼容ie的想法,至于vue怎么使用这两个文件做导出excel这里不加叙述,不会的请自动百度或评论私聊. 对于这个问题的产生,我有两种猜想供讨论,有兴趣的可以验证下是由于ie的版本产生 ...
html导出excel 兼容Ie,Firefox,Chrome浏览器
开始 <html> <head> <script type="text/javascript" language="javascript&q ...
xlsx模块前端_利用xlsx-syle前端导出excel且支持自定义样式
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的. 本文仅用于记录我在前端导出excel遇到的问题的笔记整理. 需求描述需要前端来实现对数据的导出,导出成 ...
Spring Boot poi 导出Excel表格、Txt到浏览器下载
Spring Boot & poi 导出Excel表格.Txt到浏览器下载原文链接:小回博客文章目录 Spring Boot & poi 导出Excel表格.Txt到浏览器下载一 ...
Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
vue-json-excel前端导出excel教程
vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库. 个人认为,导出在前端做,不是特别合适,最好是后端提供导出下载文件接口,如果后端确实不想提供接口,要让你做前端导出,那 ...
excel导出_学习笔记—— 前端导出excel
这两天工作上来了两个需求,一个是打印的功能,一个是导出的功能.功能其实之前已经做出来了,打印我用的是printjs的插件,excel用的是Export2Excel.js,但是产品要求打印页面和导出的e ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...

前端导出excel兼容IE和主要浏览器

前端导出excel兼容IE和主要浏览器

1.页面调用

2.script

前端导出excel兼容IE和主要浏览器相关推荐

最新文章

热门文章