利用jquery插件把HTML自定义表格导出excel

最新推荐文章于 2022-01-24 17:01:51 发布
最新推荐文章于 2022-01-24 17:01:51 发布
阅读量757 收藏 1
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/han_xiao_xiao/article/details/105240880
版权 
    项目中要用到导出功能，因为是自定义模板的表格。
    所以用不了框架自带的导出按钮。因此就利用jquery的插件jquery.table2excel.js进行导出。
    jquery和table2excel.js需要自己引入

话不多说，直接上代码：

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <title>数据导出</title>
        <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
        <meta http-equiv="X-UA-Compatible"content=“IE=edge” />
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
		<script src="../../js/jquery-2.1.0.min.js"></script>
		<script src="../../js/jquery.table2excel.js"></script>
    </head>
    <style>
        table{
            display:none;
        }
        .layui-form-item-text {
            text-align: center;
        }

        table {
            text-align: center;
        }

        .layui-table th {
            text-align: center;
        }

        .layui-btn {
            float: left;
            margin-top: 10px;
        }

        .layui-table thead tr {
            background: #fff;
        }

        .layui-table tbody tr:hover {
            background: #fff;
        }

        .layui-table {
            margin: 0;
            border-width: 1px;
        }

        .layui-bg-green {
            margin-top: 5px;
        }

        .layui-form-add {
            min-height: 70px;
            border: 0;
        }

        .layui-form-item.layui-form-item-add.tttttt {
            width: 35%;
        }

        .layui-form-item.layui-form-item-add.tttttt .layui-form-label-add {
            width: 20%;
        }

        .layui-form-item.layui-form-item-add.tttttt .layui-input-block-add {
            width: 30%;
            margin-left: 2%;
        }
    </style>
	<body>
		<table class="table2excel" data-tableName="Test Table 1" >
			<colgroup>
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
            </colgroup>
            <td colspan="6" class="layui-form-item layui-form-item-text">XXX属性</th>
            <div class="layui-form">
                <tr>
                    <td colspan="2">XXX</th>
                    <td colspan="4"></td>
                </tr>
                <tr>
                    <td colspan="2">XXX</th>
                    <td colspan="4"></td>
                </tr>
                <tr>
                    <td colspan="2">XXX</th>
                    <td colspan="4"></td>
                </tr>
                <tr>
                    <td colspan="2">电压等级</th>
                    <td colspan="4"></td>
                </tr>
                <tr>
                    <td colspan="2">XXX</th>
                    <td colspan="4"></td>
                </tr>
                <tr>
                    <td colspan="2">XXX</th>
                    <td colspan="4"></td>
                </tr>
            </div>

            <th colspan="6" class="layui-form-item layui-form-item-text">监测数据</th>
            <div class="layui-form">
                <tr>
                    <th>XXX</th>
                    <th>XXX</th>
                    <th>XXX</th>
                    <th>XXX</th>
                    <th>XXX</th>
                    <th>XXX</th>
                </tr>
                <tr>
                   <td>2020-03-20</td>
                   <td>34</td>
                   <td>45</td>
                   <td>66</td>
                   <td>12</td>
                   <td>正常</td>
                </tr>
                <tr>
                    <td>2020-03-21</td>
                    <td>34</td>
                    <td>45</td>
                    <td>66</td>
                    <td>12</td>
                    <td>正常</td>
                 </tr>
                 <tr>
                    <td>2020-03-22</td>
                    <td>34</td>
                    <td>45</td>
                    <td>66</td>
                    <td>12</td>
                    <td>正常</td>
                 </tr>
                 <tr>
                    <td>2020-03-23</td>
                    <td>34</td>
                    <td>45</td>
                    <td>66</td>
                    <td>12</td>
                    <td>正常</td>
                 </tr>
                 <tr>
                    <td>2020-03-24</td>
                    <td>34</td>
                    <td>45</td>
                    <td>66</td>
                    <td>12</td>
                    <td>正常</td>
                 </tr>
            </div>
        </table>
        <button class="exportToExcel">导出</button>
		<script>
			$(function() {
				$(".exportToExcel").click(function(e){
					var table = $(this).prev('.table2excel');
					if(table && table.length){
						var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
						$(table).table2excel({
							exclude: ".noExl",
							name: "Excel Document Name",
							filename: "开关柜" + new Date().toISOString().replace(/[\-\:\.]/g, "") + ".xls",
							fileext: ".xls",
							exclude_img: true,
							exclude_links: true,
							exclude_inputs: true,
							preserveColors: preserveColors
						});
					}
				});
				
			});
		</script>
	</body>
</html>

demo可以直接用，在IE也可以。插件可以在github上边找。我不知道这里改怎么上传。
效果就直接如图：
在这里插入图片描述
按理说td里边的都应该是左对齐。我把源码改了，让它自己居中了。这样子好看嘛

极端~
关注
如何使用html表格自定义或第三方插件以excel格式导出
weixin_43467066的博客
04-02 689
First method :user-defined <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www....
通过js将html上的表格导出excel
Minma510的博客
05-20 345
这个导出的表格是带表格边框的，之前网上找的没有边框，后来重新找的模板，东拼西凑出来的。可能有的地方代码多余，但是不是专业前端，所以效果能出来。 HTML： <a href="#" onclick="method5('tableExcel')" id="aid"> <div class="downloadbtn"> <img src="../im...
jquery html导出excel
05-18
jquery html导出excel
jquery将自定义表格导出为Excel表
Hellos_Worlds的博客
01-24 800
所需js路径:tableExcel.js-Javascript文档类资源-CSDN下载tableExcel.js更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/Hellos_Worlds/77691891 var table2excel = new Table2Excel({ defaultFileName:'这是导出后的名称.xlsx' }); table2excel.export(document.getEl...
jquery插件将html表格导出为excel格式文件tableexport
04-11
jquery插件将html表格导出为excel格式文件tableexport
html中表格数据导出插件及DEMO
05-26
html中导出表格插件，可以实现将写好的表格导出，有事例
jquery html导出excel,jquery实现excel导出的方法
weixin_33488923的博客
06-29 761
由于javascript本身是没有权限操作本地文件的,除非使用ActiveX,但这东西麻烦又不安全,完全不想用.所以从页面的表格中获得数据保存成本地文件的办法是行不通了.我们想要导出的是表格中的数据,表格中的数据又是从服务器来的,那我们把服务器上的数据下到本地保存成文件不就可以了.服务端实现代码:ServletOutputStream out = null;try{//设置输出csv的头信息res...
jquery插件将html表格导出为excel格式文件tableexport.js插件
03-07
本文将深入探讨如何使用`tableexport.js`这个jQuery插件，实现将HTML表格快速导出为Excel格式文件的功能。 首先，我们要了解`tableexport.js`的核心功能。该插件的主要目的是为网页中的HTML表格提供导出服务，支持...
jQuery插件将HTML表格导出为Excel格式文件 - tableexport.js插件
06-29
本文将深入探讨如何使用jQuery插件tableexport.js来实现将HTML表格转换为Excel格式文件的功能。 首先，我们需要理解jQuery的核心概念。jQuery通过提供一个简洁的API，使得开发者能够快速地对DOM（Document Object ...
用jquery-table2excel，进行导出excel表格 带图片 jquery.table2excel.js下载
05-04
`jquery-table2excel`是一个jQuery插件，专门用于实现这一功能，允许用户从网页上的HTML表格一键导出为Excel文件，而且还能支持包含图片的数据导出。下面我们将详细探讨这个插件的工作原理、使用方法以及其核心知识...
可将HTML表格内容导出到Excel中的jQuery插件
08-10
jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容，不需要的行可以不导出。它文件体积小，使用非常方便。
html页面表格导出excel（原生js浏览器全兼容）
09-10
如果后台不提供导出excel表格的接口，那么我们js有自己的方法可以支持。操作简单，可封装。完全抛弃后台，自己展示，自己导出，非常实用，资源内包含demo，一目了然。（原生js浏览器全兼容）
Html导出Excel文件(兼容所有浏览器)
11-01
Html导出Excel文件(兼容所有浏览器)Html导出Excel文件(兼容所有浏览器)
html导出excel和word等文档的插件.zip
11-21
html导出excel和word等文档的插件。jquery.table2excel：简单的table导excel；2.另外两个js：导出自定义的文档（除了word还有其他文档如pdf等）
html表格导出为excel
09-17
使用jquery导出表格为excel文件，有实例，简单便捷，操作方便。
可将HTML表格导出为Excel_csv_txt文件的jQuery插件
07-10
jQuery插件是这个库的一大特色，开发者可以利用它们扩展jQuery的功能，以满足特定需求。在这个场景中，我们关注的是一个专门用于将HTML表格数据导出到Excel、CSV或TXT文件的jQuery插件。 1. **HTML表格数据导出**：...
Html页面生成excel,html页面导出为excel表格
weixin_42115074的博客
06-03 553
导出考勤表格王婷111一见倾城333 祈澈姑娘222Python开发者交流平台44wwwangting88813661725475//打印表格var idTmr;function getExplorer() {var explorer = window.navigator.userAgent;//ieif(explorer.indexOf("MSIE") >= 0) {return ‘ie‘...
支持10种格式的 HTML 表格导出 jQuery 插件
weixin_34346099的博客
07-22 95
　　HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON、XML、PNG、CSV、TXT、SQL、MS-Word、MS-Excel、MS-PowerPoint 和 PDF 格式。您可以轻松地设置字体大小，分隔符，导出类型等。 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12...
HTML导出EXCEL
仰望者！
11-03 145
http://kboby.blog.163.com/blog/static/5882164520081016650925/   另一种方法： 最佳答案 如果用java实现的话，那就需要用到jxl.jar包中提供的类方法来完成了，你可以先查看一下jxl的资料再来做。 还有一种简单的方法就是用javascript脚本生成，例如： &lt;!DOCTYPE html PUBLIC "...
jQuery EasyUI datagrid 导出 Excel 功能实现
"这篇内容是关于使用Jquery EasyUI Datagrid插件来实现JavaScript导出数据到Excel的功能。作者借鉴了EXTGrid的导出方法，通过构建XML文档并转化为Base64编码，最后生成一个data URL链接供用户下载。" 在Web开发中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值