结果：

将网页上拿到的数据导出成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. php使用cvs导出百万条数据,大量数据

    MySQL CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(45) NOT NULL DEFAUL ...

  2. java面试：多线程

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

  3. NSView subview blocking drag/drop event

    原文链接 近期在Mac项目中有一个处理鼠标拖拽事件的需求, 大致处理流程是这样的: 从 NSView 继承得到一个子类 覆盖处理拖拽事件相关方法 注册拖拽事件 开始的时候一切都很正常,直到某次发现拖拽 ...

  4. Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格

    Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格 在 Excel Power Query 未出来之前,把文件夹下所有文件合并为一个与合并同一工作表中的多个工作表,需要用 V ...

  5. 新的ASP.NET Core 迁移指南

    最近在微信里做了一个调查: Web Forms应用程序升级到.NET 6, 收到550份调查,调查还在继续,欢迎参与调查.可以访问链接:https://wj.qq.com/s2/9822949/ac3 ...

  6. npm vue路由配置

    npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1)     npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...

  7. Linux企业常用命令详解

    cat :查看 cat [-AbeEnstTuv] [--help] [--version] fileName 常用参数: -n :由 1 开始对所有输出的行数编号 -b :和 -n 相似,对于空白行 ...

  8. centos7升级openssh8.7&openssl1.1.1l脚本

    脚本下载地址或首页联系本人获取 https://files.cnblogs.com/files/blogs/705493/update_ssh.sh 需搭配openssh8.7和openssl1.1. ...

  9. 什么？Android上面跑Linux？

    前言 众所周知,现在程序员因为工作.个人兴趣等对各种系统的需求越来越大,部分人电脑做的还是双系统.其中,比较常见的有各种模拟器.虚拟机在windows上面跑Android.Linux,大家估计都习以为 ...

  10. loj2341「WC2018」即时战略(随机化，LCT/动态点分治)

    loj2341「WC2018」即时战略(随机化,LCT/动态点分治) loj Luogu 题解时间 对于 $ datatype = 3 $ 的数据,explore操作次数只有 $ n+log n $ ...