结果：

将网页上拿到的数据导出成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的更多相关文章

  1. # vue 如何通过前端来导出excel表格

    在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...

  2. 前端 json 导出 excel

    参考:https://blog.csdn.net/abel_yang/article/details/78684786 在github上有大神提供现成的插件,非常感谢 https://cuikangj ...

  3. js 前端 table 导出 excel

    园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,st ...

  4. 前端自己导出Excel

    1.导出当前页面,这是最简单的,只是导出当前页面的数据. exportData(tableid, name) { let table; let uri = 'data:application/vnd. ...

  5. vue项目，前端导出excel

    今天研究一下前端如何导出excel,边查边实践,边记录 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还涉及不少二进制的东西 file-saver:ES5新增了相关 ...

  6. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  7. Atitit.导出excel功能的设计 与解决方案

    Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js  jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...

  8. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  9. 前端导出excel数据-jsonToExcel

    咳咳,好久没有写博了... 在工作中遇到了纯前端,将数据导出为excel文件.正文开始: 第一步 安装依赖: npm i xlsx 第二步 写导出函数: import XLSX from 'xlsx' ...

随机推荐

  1. 微信小程序清除缓冲

    1:wxml定义一个清除缓冲的按钮,并绑定触摸事件 <button bindtap="clear">清空缓冲</button> 2:wxjs定义方法: // ...

  2. CentOS8时间同步

    CentOS8中默认已经不再支持ntpd软件包,同时也无法通过官方软件仓库安装, CentOS8上使用Chrony配置NTP服务器,用于同步时间. 它有两个程序,chrony和chronyd, chr ...

  3. 软件工程homework-003

    软件工程第三次作业 博客信息 沈阳航空航天大学计算机学院2020软件工程作业 作业要求 软件工程第三次作业 课程目标 熟悉一个"高质量"软件的开发过程 作业目标 熟悉代码规范及结对 ...

  4. LOJ6485题解

    应该是经典题之一了. \[[n|k]=\frac 1 n\sum_{i=0}^{n-1}w_n^{ik} \] 有这个就可以算了. \[\sum_{i=0}^n\binom n i x^ia_{i \ ...

  5. CVE-2018-12613phpMyAdmin 后台文件包含漏洞分析

    一.    漏洞背景 phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此Web接口可以成 ...

  6. ArcMap操作随记（3）

    1.地图四要素: 图名.图例.比例尺.指北针 2.[栅格计算器].[加权叠加]和[加权总和]的不同 [栅格计算器]的结果是浮点型小数 [加权叠加]工具,输入栅格必须为整型.若成本栅格涉及重分类,最好用 ...

  7. 【基础】tail命令查看日志

    一.tail 命令介绍 tail 命令可以将文件指定位置到文件结束的内容写到标准输出. 如果你不知道tail命令怎样使用,可以在命令行执行命令tail --help就能看到tail命令介绍和详细的参数 ...

  8. C#: .net序列化及反序列化 [XmlElement(“节点名称”)] [XmlAttribute(“节点属性”)] （下篇）

    介绍 XML 序列化 .NET Framework 开发员指南   序列化是将对象转换为容易传输的格式的过程.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间 ...

  9. tomcat启动 ssm项目出现乱码的解决

    0.乱码产生原因:编码和解码的方式是不同 1.出现乱码的解决方式[推荐]: 在tomcat 的配置文件web.xml 中添加上请求编码过滤器: <!-- 请求编码过滤器 --> <f ...

  10. Python 细聊从暴力（BF）字符串匹配算法到 KMP 算法之间的精妙变化

    1. 字符串匹配算法 所谓字符串匹配算法,简单地说就是在一个目标字符串中查找是否存在另一个模式字符串.如在字符串 "ABCDEFG" 中查找是否存在 "EF" ...