结果：

将网页上拿到的数据导出成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. tp5 ajax单文件上传

    HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. java面试：多线程

    1.多线程 ​ 同步:发送一个指令需要等待返回才能发送下一条(完成一件事才能做下一件). ​ 异步:发送一个请求不需要等待返回,随时可以再发下一条(一次进行多个事件) 线程不安全根本原因是异步,对一个 ...

  3. LGP5824口胡

    万 恶 之 源 十 二 重 计 数 法 先鸽子了 球有序,盒子有序 答案明显为 \(m^n\). 球有序,盒子有序,每个盒子最多放一个 答案明显为 \(\binom{m}{n}n!\). 球有序,盒子 ...

  4. Wireshark OpenFlow解析器拒绝服务漏洞

    受影响系统:Wireshark Wireshark 2.2.0 - 2.2.1Wireshark Wireshark 2.0.0 - 2.0.7描述:CVE(CAN) ID: CVE-2016-937 ...

  5. Django安装和web框架原理

    Django安装和web框架原理 在PyCharm中安装 在cmd中输入 django-admin startproject 项目名 如果报错 不是内部或外部命令,也不是可运行的程序 需要添加环境变量 ...

  6. (leetcode)链表反转-c语言实现

    反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 使用迭代方法,代码 ...

  7. chili

    靶机准备 首先将靶机ova文件导入 网络模式改为NAT 扫描ip netdiscover -r 192.168.164.0/24 kali:192.168.164.137 渗透测试 扫描端口 nmap ...

  8. select 中的timeout

    1. select 相关man 资料 /* According to POSIX.1-2001 */ #include <sys/select.h> /* According to ear ...

  9. kafka如何保证不重复消费又不丢失数据_Kafka写入的数据如何保证不丢失？

    我们暂且不考虑写磁盘的具体过程,先大致看看下面的图,这代表了 Kafka 的核心架构原理. Kafka 分布式存储架构 那么现在问题来了,如果每天产生几十 TB 的数据,难道都写一台机器的磁盘上吗?这 ...

  10. SpringMvc用什么对象从后台向前台传递数据的？

    通过ModelMap对象,可以在这个对象里面调用put方法,把对象加到里面,前台就可以通过el表达式拿到.