结果：

将网页上拿到的数据导出成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. 同步a表的数据到 b表

    //同步a表的数据到 b表UPDATE a t1 JOIN b t2 ON t1.finance_id = t2.idSET t1.a_id = t2.a_id,t1.b_name = t2.b_na ...

  2. composer 自动载入的四种方式

    对于第三方包的自动加载,Composer提供了四种方式的支持,分别是 PSR-0和PSR-4的自动加载,生成class-map,和直接包含files的方式. 首先引入autoload.php,在主文件 ...

  3. spring源码干货分享-对象创建详细解析（set注入和初始化）

    记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 建议:学习过程中要开着源码一步一步过 Spring根据BeanDe ...

  4. python爬虫-使用线程池与使用协程的实例

    背景:爬取豆瓣电影top250的信息 使用线程池 import re from concurrent.futures import ThreadPoolExecutor import requests ...

  5. 硬吃一个P0故障，「在线业务」应该如何调优HBase参数？

    1.背景 由于种种原因,最近将核心业务生产使用的HBase迁移到了云上的弹性MapReduce(EMR)集群上,并使用了EMR的HBase组件默认参数配置. 结果在流量高峰期出现了宿主机故障,挂掉了两 ...

  6. 开源版-阿里云人脸搜索M：N，人脸比对1：1

    一.人脸搜索概要 本项目是阿里云视觉智能开放平台的人脸1:N的开源替代,项目中使用的模型均为开源模型,项目支持milvus和proxima向量存储库,并具有较高的自定义能力. 项目使用纯Java开发, ...

  7. CF1225E Rock Is Push （计数）

    观察性质计数题orz小贺 考场上跟榜才切 我们只能往下和往右走,那么只有连续的往下和往右可能会造成不合法的情况!如果当前这一步是向右,那么只有它前面连续的一段向右可能影响到它. 考虑把连续的向右/下一 ...

  8. grafana初级入门

    grafana初级入门 预备知识 Metrics.Tracing和Logging的区别 监控.链路追踪及日志作为实时监测系统运行状况,这三个领域都有对应的工具和解决方案. Metrics 监控指标的定 ...

  9. 编写 Shell 程序，实现自动删除 50 个账号的功能，账号名为stud1 至 stud50 ？

    #!/bin/bashfor((i=1;i<51;i++))do  userdel -r stud$idone

  10. Pycharm连接MySQL步骤及注意点

    1.数据库连接修改MySQL: 默认:MySQLDB #MySQLDB只支持Python2,暂不支持python3,所以要修改, 修改成:pymysql,在每个项目中都需要先导入pymysql模块, ...