实现HTML页面表格导出excel

最新推荐文章于 2024-05-16 18:15:52 发布
最新推荐文章于 2024-05-16 18:15:52 发布
阅读量3.5k 收藏 2
点赞数 1
分类专栏： linux运维 文章标签： html excel 导出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xizaihui/article/details/53169628
版权 
直接上代码，下载测试：
<html>
        <head>
<title>接口统计</title>
<style>
td
{
text-align:center;border:solid #0066CC; border-width:0px 1px 1px 0px; padding:10px 0px;
}
table
{
border:solid #0066CC; border-width:1px 0px 0px 1px;
}
body {background-color:#CCCCCC;}
</style>
</head> 

        <body align=center>
        <meta charset=UTF-8>
        <center>  
            <h1>统计</h1>
<table border=1>
<tr>  
        <td>名称</td>
<td>城 市</td>
<td> 2016-11-13 </td>
<td> 2016-11-14</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>北 京 </td>
<td> 164 </td>
<td> 146</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>成 都 </td>
<td> 179 </td>
<td> 189</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>杭 州 </td>
<td> 211 </td>
<td> 231</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>济 南 </td>
<td> 59 </td>
<td> 44</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>长 春 </td>
<td> 250 </td>
<td> 300</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>南 京 </td>
<td> 56 </td>
<td> 50</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>郑 州 </td>
<td> 40 </td>
<td> 41</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>青 岛 </td>
<td> 14 </td>
<td> 16</td>  
    </tr>
<tr>  
        <td>促销组合</td>
<td>西 安 </td>
<td> 16 </td>
<td> 46</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>北 京 </td>
<td> 3545 </td>
<td> 4143</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>成 都 </td>
<td> 6810 </td>
<td> 7297</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>杭 州 </td>
<td> 3626 </td>
<td> 3868</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>济 南 </td>
<td> 1245 </td>
<td> 1864</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>长 春 </td>
<td> 2810 </td>
<td> 3535</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>南 京 </td>
<td> 883 </td>
<td> 1321</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>郑 州 </td>
<td> 872 </td>
<td> 1120</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>青 岛 </td>
<td> 658 </td>
<td> 1247</td>  
    </tr>
<tr>  
        <td>厂家专柜</td>
<td>西 安 </td>
<td> 753 </td>
<td> 1336</td>  
    </tr>
<tr>  
        <td>限时秒杀</td>
<td>全 国 </td>
<td> 30505 </td>
<td> 36111</td>  
    </tr>
<tr>  
        <td>品牌特卖</td>
<td>全 国 </td>
<td> 5017 </td>
<td> 5441</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>北 京 </td>
<td> 182 </td>
<td> 180</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>成 都 </td>
<td> 314 </td>
<td> 338</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>杭 州 </td>
<td> 168 </td>
<td> 194</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>济 南 </td>
<td> 45 </td>
<td> 66</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>长 春 </td>
<td> 191 </td>
<td> 198</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>南 京 </td>
<td> 75 </td>
<td> 76</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>郑 州 </td>
<td> 67 </td>
<td> 113</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>青 岛 </td>
<td> 32 </td>
<td> 45</td>  
    </tr>
<tr>  
        <td>厂家特卖</td>
<td>西 安 </td>
<td> 16 </td>
<td> 40</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>北 京 </td>
<td> 12825 </td>
<td> 14322</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>成 都 </td>
<td> 22894 </td>
<td> 22641</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>杭 州 </td>
<td> 15482 </td>
<td> 15161</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>济 南 </td>
<td> 4819 </td>
<td> 6099</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>长 春 </td>
<td> 10125 </td>
<td> 14276</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>南 京 </td>
<td> 3216 </td>
<td> 4211</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>郑 州 </td>
<td> 2609 </td>
<td> 3178</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>青 岛 </td>
<td> 2711 </td>
<td> 4604</td>  
    </tr>
<tr>  
        <td>无忧特价日</td>
<td>西 安 </td>
<td> 2479 </td>
<td> 5903</td>  
    </tr>
<tr>  
        <td>/www/html/</td>
<td>全 国 </td>
<td> 263 </td>
<td> 295</td>  
    </tr>
</table>
<a>导出表格</a>

    <script>
        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var a = document.getElementsByTagName("a")[0];
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(blob);
        // 设置文件名，目前只有Chrome和FireFox支持此属性
        a.download = "接口统计.xls";
    </script>
</body></center></html>

导出文件为xsl后缀的文件，不是真正的excel文件，但是可以用excel打开然后调整格式，保存即可。
如图：
这里写图片描述

抱抱熊
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html页面表格导出excel（原生js浏览器全兼容）
09-10
在网页开发中，有时我们...提供的`js浏览器导出Excel`资源应该包含了一个示例，你可以参考这个示例代码来理解并应用到自己的项目中。这种方法简单易用，适用于各种网页表格导出需求，极大地提高了前端开发的灵活性。
js网页表格导出excel文件代码
07-24
总结来说，JavaScript网页表格导出Excel文件的核心技术包括解析HTML表格，生成CSV或使用SheetJS生成.xlsx文件，以及使用FileSaver.js进行文件保存。通过理解这些技术，开发者可以轻松地实现网页表格数据的导出功能，...
Web前端最全html table 如何导出为excel表格案例分享_html table导出为excel，面试加分项 徐强百度云
最新发布
2401_84435739的博客
05-16 1143
1）页面添加一个动作按钮。">导出});//导出html表格为 excel 文件### js基础1)对js的理解？2)请说出以下代码输出的值？3)把以下代码，改写成依次输出0-94)如何区分数组对象，普通对象，函数对象5)面向对象、面向过程6)面向对象的三大基本特性7)XML和JSON的区别？8)Web Worker 和webSocket？9)Javascript垃圾回收方法？10)new操作符具体干了什么呢？11)js延迟加载的方式有哪些？
layui数据表格导出Excel插件
07-20
layui数据表格导出Excel插件是一款为layui框架设计的实用工具，它允许用户方便地将layui数据表格中...总之，layui数据表格导出Excel插件提供了一个高效、便捷的解决方案，使得在layui项目中实现数据导出变得轻而易举。
JavaScript将页面表格导出为Excel的具体实现
10-26
在本文中，我们将探讨如何使用JavaScript将页面上的表格数据导出为Excel文件，这是一种常见的需求，有助于用户方便地管理和存储网页中的数据。 在实现这个功能时，我们通常依赖于浏览器提供的特定API或库，比如...
centos7卸载mariadb 安装mysql
热门推荐
抱抱熊的博客
11-05 2万+
列出所有被安装的rpm package # rpm -qa | grep mariadbmariadb-libs-5.5.50-1.el7_2.x86_64 mariadb-5.5.50-1.el7_2.x86_64 mariadb-server-5.5.50-1.el7_2.x86_64卸载# rpm -e mariadb-libs-5.5.50-1.el7_2.x86_64此时报错：error:
Mysqldump远程备份、恢复mysql数据库
抱抱熊的博客
11-08 1万+
本地通过Mysqldump备份远程服务器上mysql的数据库：1、远程地址 直接上shell脚本#!/bin/bashd=`date +'%Y%m%d_%H_%M_%S'`mysqldump -h mysql.rds.aliyuncs.com -u user -p'passwd' dbname | gzip > dbname.sql.gz_$drm `find ./ -name "cgwy.sq
Mysqldump导入数据库很慢的解决办法
抱抱熊的博客
11-09 1万+
1、MySQLdump导出的SQL语句在导入到其他数据库的时候会相当慢，甚至几十秒才处理一条SQL；在反复测试后，发现有两个参数会影响导入的速度 --max_allowed_packet=***** 客户端/服务器之间通信的缓存区的最大大小; --net_buffer_length=**** TCP/IP和套接字通信缓冲区大
grep精确匹配
抱抱熊的博客
11-24 1万+
如下文档test.txt，想从中打印含有“1.10.10.1”相邻的端口列1.10.10.1 4000 1.10.10.2 4001 1.10.10.11 4002 11.10.10.1 4003grep精确匹配：# grep -w '1.10.10.1' test.txt | awk '{print $2}' # 4000或者# grep '\<
CentOS 7 yum安装MySQL5.6
抱抱熊的博客
10-29 1万+
文章演示如何使用yum的方式安装MySql 5.6.24。 1 常规错误的yum安装方法： 在前文中记述了CentOS 6.5系统中通过yum方式快速地搭建了LNMP环境，那么是否也能在CentOS 7或CentOS 7.1系统中依葫芦画瓢安装MySql5.6.24呢？答案是否定的。 [root@typecodes ~]# yum -y install mysql mysql-server
Centos7创建支持ssh服务器的docker容器
抱抱熊的博客
10-28 7239
1、启动一个docker容器:# docker run -it centos：latest /bin/bash这样就会新建一个docker容器,并且进入容器的bash中 2、安装sshd：# yum -y install openssh-server # yum -y install openssh-clients3、启动sshd服务：# /usr/sbin/sshd -D我的报一下错误Could
yum -y upgrade升级包报错
抱抱熊的博客
11-06 4158
当我运行# yum -y upgrade升级yum包时，报错：Loaded plugins: fastestmirror base
Centos7服务器中Docker启动mysql容器
抱抱熊的博客
11-01 2725
首先，配置配置 Docker 加速器：由于国外镜像下载缓慢，咱们中国人用自己国内镜像，这里，博主用的是DaoCloud镜像加速：# curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://271adcfb.m.daocloud.io该脚本可以将 –registry-mirror 加入到你的 Docker 配置文件
GoAccess 分析nginx 日志
抱抱熊的博客
11-03 1885
1、安装GoAccess需要一些系统支持库# yum -y install glib2 glib2-devel GeoIP-devel ncurses-devel zlib zlib-devel由于Geo-IP库没有得到软件作者的更新，分析的IP地理位置不准确，所以需要安装外置ip库分析ip的城市位置下载nali-0.2.tar.gz，百度云盘下载地址：http://pan.baidu.com/s
使用innobackupex在线备份及恢复mysql数据库
抱抱熊的博客
11-06 1296
一、安装解压1.安装数据库 官网：http://www.percona.com 下载地址：http://www.percona.com/redir/downloads/XtraBackup/XtraBackup-2.0.8/binary/Linux/x86_64/percona-xtrabackup-2.0.8-587.tar.gz# yum -y install mysql mysql-lib
Centos7系统 docker启动nginx1.10.1容器
抱抱熊的博客
11-03 1213
docker具体安装，详情见我的另一篇博客，这里就不说了。拉取官方的镜像：# docker pull nginx:1.10.1先在当前根目录创建文件夹： mkdir conf然后将自己配置好的nginx.conf配置文件拷贝到conf文件夹中运行容器：# docker run -p 80:80 --name nginx -v $PWD/www:/www -v $PWD/conf/nginx.conf
Centos7.2配置静态IP
抱抱熊的博客
11-03 1148
编辑：# vim /etc/sysconfig/network-scripts/ifcfg-eno1TYPE=Ethernet #BOOTPROTO=dhcp //禁止DHCP功能 BOOTPROTO=static DEFROUTE=yes PEERDNS=yes PEERROUTES=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF
利用pipework开源网络配置工具配置docker容器网络和host主机网络在同一个网段
抱抱熊的博客
10-28 1139
CentOS7需安装网络和桥接工具# yum install -y net-tools # yum install -y bridge-utils # yum -y install git安装pipework开源网络配置工具# git clone https://github.com/jpetazzo/pipework # cp ~/pipework/pipework /usr/local/bin/
Vue前端实现表格数据导出为Excel
关键函数`tableToExcel(tableId, fileName)`用于导出Excel。在这个函数中，首先定义了一个名为`base64`的辅助函数，用于将字符串编码为Base64。然后，根据需求选择获取表格元素的方式，这里选择了`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值