dataTable表格数据导出excel以及pdf和打印功能

最新推荐文章于 2022-10-25 18:14:50 发布
最新推荐文章于 2022-10-25 18:14:50 发布
阅读量2k 收藏 12
点赞数 4
分类专栏： 实用干货 技术开发 文章标签： 数据分页 dataTable jquery 导出excel 导出pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code_aJack/article/details/102859243
版权

表格数据增加excel以及pdf打印功能

首先，要使用导出excel和导出pdf、打印可以导入dataTable的相关的一些js和css文件
d在这里发入图片描述
DataTable这个插件非常好用，它不但可以美化表格、还可以帮你自动地把表格分页、排序、搜索功能、以及导出相关excel和pdf
新建一个html文件，在头部引入相关的js和css

  <link rel="stylesheet" href="css/jquery.datatables.min.css" />    <!-- dataTable主要css -->
  <link rel="stylesheet" href="css/buttons.dataTables.min.css" />   <!-- dataTable表格按钮主要css -->

    <script src="js/jquery.min.js"></script>                       <!-- dataTable表格主要js -->
    <script src="js/jquery.datatables.min.js"></script>            <!-- dataTable表格主要js -->
    <script src="js/dataTables.buttons.min.js"></script>           <!-- dataTable表格按钮主要js -->
    <script src="js/jszip.min.js"></script>
    <script src="js/buttons.html5.min.js"></script>          <!-- 导出功能相关js -->
    <script src="js/buttons.flash.min.js"></script>          <!-- 导出功能相关js -->
    <script src="js/pdfmake.min.js"></script>               <!-- 导出功能相关js -->
    <script src="js/vfs_fonts.js"></script>               <!-- 导出功能相关js -->
    <script src="js/buttons.print.min.js"></script>       <!-- 导出功能相关js -->

引入相关文件后，只需要给我们的< table> 组件 新增一个id，等下直接就可以用js来识别它并自动帮你分页数据等等了…
在这里插入图片描述
标识好了以后开始写js控制分页

    <script type="text/javascript">
        $(document).ready( function () {
            $('#example').DataTable({
                dom: 'Bfrtip',
                lengthMenu: [ [ 6, 10, 20, 30, 50, -1], [ 6 , 10, 20, 30, 50, "所有"] ],
                language: {
                    emptyTable: '没有数据',
                    loadingRecords: '加载中...',
                    processing: '查询中...',
                    search: '请输入关键词:',
                    lengthMenu: '每页 _MENU_ 件',
                    zeroRecords: '没有数据',
                    paginate: {
                        'first':      '第一页',
                        'last':       '最后一页',
                        'next':       '下一页',
                        'previous':   '上一页'
                    },
                    info: '第 _PAGE_ 页 / 总 _PAGES_ 页,共 _TOTAL_ 项结果',
                    infoEmpty: '没有数据',
                    infoFiltered: '(过滤总件数 _MAX_ 条)',
                },
                buttons: [
                    {
                        extend: 'copyHtml5',
                    },
                    {
                        extend: 'excelHtml5',
                        title: 'Data export'
                    },
                    {
                        extend: 'pdfHtml5',
                        title: 'Data export'
                    },
                    {
                        extend: 'csvHtml5',
                        title: 'Data export'
                    },
                    {
                        extend:'print',
                    }
                ]
            } );

            $(".buttons-copy").text('复制');
            $(".buttons-excel").text('导出excel');
            $(".buttons-pdf").text('导出pdf');
            $(".buttons-csv").text('导出csv');
            $(".buttons-print").text('打印');

        });
    </script>

写成这样应该是一个比较好的基础分页了，接下来我们就看看效果：
在这里插入图片描述
在这里插入图片描述
导出以后数据没问题！完美！

下面是完整的html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
 <head>  
  <title> 导出到Excel </title>  
  <meta charset='utf-8'>
  <link rel="stylesheet" href="css/jquery.datatables.min.css" />    <!-- dataTable主要css -->
  <link rel="stylesheet" href="css/buttons.dataTables.min.css" />   <!-- dataTable表格按钮主要css -->

    <script src="js/jquery.min.js"></script>                       <!-- dataTable表格主要js -->
    <script src="js/jquery.datatables.min.js"></script>            <!-- dataTable表格主要js -->
    <script src="js/dataTables.buttons.min.js"></script>           <!-- dataTable表格按钮主要js -->
    <script src="js/jszip.min.js"></script>
    <script src="js/buttons.html5.min.js"></script>          <!-- 导出功能相关js -->
    <script src="js/buttons.flash.min.js"></script>          <!-- 导出功能相关js -->
    <script src="js/pdfmake.min.js"></script>               <!-- 导出功能相关js -->
    <script src="js/vfs_fonts.js"></script>               <!-- 导出功能相关js -->
    <script src="js/buttons.print.min.js"></script>       <!-- 导出功能相关js -->
  <style>
  	tbody td{
  		text-align: center;
  	}
  </style>
 </head>  
  
 <body>  
 	<h1>表格数据导出案例</h1>

 	<table id="example" class="display" role="grid" aria-describedby="example_info">
 		<thead>
            <tr>
                <th>事件ID</th>
                <th>员工ID</th>
                <th>标题</th>
                <th>地址</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>

 	</table>

  <script>  
    $(document).ready(function(){ 
    	var xx=[
	        {
		        id: 1,
		        emptyid:"1",
		        title: '早班',
		        start: '2018-03-01'
	        },
	        {
	        	id: 2,
		        emptyid:"2",
	          	title: '中班',
	          	start: '2018-03-07'
	        },
	        {
	            id: 3,
		        emptyid:"3",
	            title: '晚班',
	            start: '2018-03-09'
	        },
	        {
	            id: 4,
		        emptyid:"4",
	            title: '其他',
	            start: '2018-03-16'
	        },
	        {
	            id: 5,
		        emptyid:"5",
		        title: '早班',
		        start: '2018-03-11',
	        },
	        {
	            id: 6,
		        emptyid:"6",
	            title: '晚班',
	            start: '2018-03-12'
	        },
	        {
	            id: 7,
		        emptyid:"7",
	            title: '中班',
	            start: '2018-03-12'
	        },
	        {
	            id: 8,
		        emptyid:"8",
	            title: '其他',
	            start: '2018-03-12'
	        },
	        {
	            id: 9,
		        emptyid:"9",
	            title: '早班',
	            start: '2018-03-12'
	        },
	        {
	            id: 11,
		        emptyid:"10",
	            title: '其他',
	            start: '2018-03-13'
	        },
	        {
	            id: 12,
		        emptyid:"11",
	            title: '晚班',
	            url: 'http://www.baidu.com/',
	            start: '2018-03-28'
	        },
	        {
	            id: 13,
		        emptyid:"1",
	            title: '晚班',
	//          url: 'http://baidu.com/',
	            start: '2018-02-28'
	        },
	        {
		        id: 14,
		        emptyid:"1",
		        title: '早班',
		        start: '2018-04-01'
	        },
	        {
	        	id: 15,
		        emptyid:"2",
	          	title: '中班',
	          	start: '2018-04-07'
	        },
	        {
	            id: 16,
		        emptyid:"3",
	            title: '晚班',
	            start: '2018-04-09'
	        },
	        {
	            id: 17,
		        emptyid:"4",
	            title: '其他',
	            start: '2018-04-16'
	        },
	        {
	            id: 18,
		        emptyid:"5",
		        title: '早班',
		        start: '2018-04-11',
	        },
	        {
	            id: 19,
		        emptyid:"6",
	            title: '晚班',
	            start: '2018-04-12'
	        },
	        {
	            id: 20,
		        emptyid:"7",
	            title: '中班',
	            start: '2018-04-12'
	        },
	        {
	            id: 21,
		        emptyid:"8",
	            title: '其他',
	            start: '2018-04-12'
	        },
	        {
	            id: 22,
		        emptyid:"9",
	            title: '早班',
	            start: '2018-04-12'
	        },
	        {
	            id: 23,
		        emptyid:"10",
	            title: '其他',
	            start: '2018-04-13'
	        },
	        {
	            id: 24,
		        emptyid:"11",
	            title: '晚班',
	            url: 'http://www.baidu.com/',
	            start: '2018-04-28'
	        },
	        {
	            id: 25,
		        emptyid:"1",
	            title: '晚班',
	//          url: 'http://baidu.com/',
	            start: '2018-04-28'
	        }
	        
	    ];
	    
	    
	    for(i=0;i<xx.length;i++){
	    	var html="<tr><td>"+xx[i].id+"</td><td>"+xx[i].emptyid+"</td><td>"+xx[i].title+"</td><td>"+xx[i].url+"</td><td>"+xx[i].start+"</td></tr>";
	    	$("#example tbody").append(html);
	    }
	    


	});

  </script>

    <script type="text/javascript">
        $(document).ready( function () {
            $('#example').DataTable({
                dom: 'Bfrtip',
                lengthMenu: [ [ 6, 10, 20, 30, 50, -1], [ 6 , 10, 20, 30, 50, "所有"] ],
                language: {
                    emptyTable: '没有数据',
                    loadingRecords: '加载中...',
                    processing: '查询中...',
                    search: '请输入关键词:',
                    lengthMenu: '每页 _MENU_ 件',
                    zeroRecords: '没有数据',
                    paginate: {
                        'first':      '第一页',
                        'last':       '最后一页',
                        'next':       '下一页',
                        'previous':   '上一页'
                    },
                    info: '第 _PAGE_ 页 / 总 _PAGES_ 页,共 _TOTAL_ 项结果',
                    infoEmpty: '没有数据',
                    infoFiltered: '(过滤总件数 _MAX_ 条)',
                },
                buttons: [
                    {
                        extend: 'copyHtml5',
                    },
                    {
                        extend: 'excelHtml5',
                        title: 'Data export'
                    },
                    {
                        extend: 'pdfHtml5',
                        title: 'Data export'
                    },
                    {
                        extend: 'csvHtml5',
                        title: 'Data export'
                    },
                    {
                        extend:'print',
                    }
                ]
            } );

            $(".buttons-copy").text('复制');
            $(".buttons-excel").text('导出excel');
            $(".buttons-pdf").text('导出pdf');
            $(".buttons-csv").text('导出csv');
            $(".buttons-print").text('打印');

        });
    </script>
 </body>  
</html>
code_aJack
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
DataTable使用详解
2401_84153270的博客
04-30 574
搞定算法，面试字节再不怕，有需要文章中分享的这些二叉树、链表、字符串、栈和队列等等各大面试高频知识点及解析最后再分享一份终极手撕架构的大礼包(学习笔记)：分布式+微服务+开源框架+性能优化《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门，即可获取！} );/*bVisible默认值为true是否展示某一列*/] } );} );
JQuery DataTables 导出 Excel（文件导出，打印功能）
热门推荐
shuai_wy的专栏
11-23 3万+
JQuery DataTables 导出 Excel（文件导出，打印功能）
spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统 之 消息功能 datatables export pdfHtml5...
weixin_30312557的博客
01-02 84
今天，完成了 消息管理的 功能优化， 1 增加了 jquery datatables 的通用输出，列拖动，自动保存状态功能。 2 存在的问题： 导出pdf 中文乱码，官方文档说用pdfHtml5 可以实现，pdfHtml用了另外的一个pdf库，该库文档说要自己编译字体，暂时放弃该问题的处理。 存在到的问题： 需要在js中来动态设置显示列的样式，影响性能。 也没有深入研究那个状...
jquery插件导出excel和pdf（解决中文乱码问题）
weixin_30260399的博客
03-20 350
参考文件：http://jackyrong.iteye.com/blog/2169683 https://my.oschina.net/aruan/blog/418980 　　　　https://segmentfault.com/a/1190000013168209 js引用文件地址：https://files.cnblogs.com/files/likui-b...
修改jquery.table2excel.js让他导出Excel支持css样式
代码笔记
09-16 1938
修改jquery.table2excel.js让他导出Excel支持css样式
js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
你好邱林和的专栏
09-12 1万+
js前端导出excel,网上的例子很多,大部分都是使用如下代码: //统计导出 $scope.statisExport=function(){ toOutPutExcel('statisTable', '证件发放'); }; //导出 var idTmr; function getExplorer() { var explorer = window.n
ngx-datatable的使用
qq_37957971的博客
09-14 913
ngx-datatable 混合开发
复杂多表头excel表格的导出及布局，支持拓展
02-22
总结来说，掌握复杂多表头Excel表格的创建和导出技巧，能有效提高数据管理和分析的效率。无论是手动操作还是编程实现，理解并熟练运用这些方法，都将极大地提升你在处理数据时的灵活性和适应性。在实际工作中，根据...
.net6 WebApi Excel转PDF并下载PDF文件
10-21
在.NET 6框架中，开发WebApi应用时，有时我们需要处理Excel文件并将它们转换为PDF格式，以便用户能够方便地下载和查看。本教程将详细讲解如何使用C#语言实现这个功能。 首先，我们需要引入一些必要的库来支持Excel...
C#导出Excel 导出PDF
05-21
本主题聚焦于如何利用C#实现数据的导出功能，包括将查询结果或表格信息导出为Excel文件和PDF文档。这两种格式在数据共享、报告生成和打印等方面非常常见。 首先，我们来看C#导出Excel的实现。Excel文件通常以`.xlsx...
Datatable数据导出插件程序源码
04-18
Datatable数据导出插件程序源码是一种实用的工具，专为使用Datatable插件的Web应用程序设计，用于将表格中的数据便捷地导出到Excel文件。Datatable是一款功能强大的JavaScript库，它允许开发者创建交互式、响应式的...
tableExport导出pdf 中文 乱码解决
05-26
目前在做一个项目要求导出pdf文件，但发现导出中文乱码，研究了好久终于解决，现整理好分享给大家
winform中将Datatable数据导出为PDF文件
06-08
winform中将Datatable数据导出到PDF文件中，该项目包含了例子，能使个人能更加了解winform将datatable数据导出到PDF的整个流程，本资源也可拿来即用，只需要稍加修改即可。
DataTables导出CVS Excel PDF
09-20
DataTables csv pdf Print 转换
DataTables导出CVS Excel PDF 打印
09-20
它提供了丰富的功能，如数据排序、搜索、分页以及多种数据导出选项，包括CSV、Excel和PDF格式。在本篇中，我们将深入探讨如何利用DataTables实现这些导出和打印功能。 首先，让我们了解CSV（Comma-Separated Values...
纯前端预览并且导出pdf----js将table预览为pdf、并导出为pdf
huanhuan03的博客
04-28 6889
纯前端导出pdf js导出table为pdf js预览pdf js将table导出为pdf 导出pdf 预览pdf
datatable导出excel、word、png、pdf等样式
qq_26747571的博客
08-19 5717
最近在添加了datatable导出excel的功能，下面内容包括了将datatable数据转为json、text、excel、word、png、pdf等格式的实现过程 最终页面如下： 导出excel、text及json显示效果如下： 1.首先引入必须的js文件和css样式 这些文件可在bootstrap官网中找到，tableExport.js可在网页中自行下载 2
使用第三方组件NPOI和iTextSharp根据DataTable导出Excel、Word、Pdf
功夫再高也怕菜刀 充分体现了科技的力量
02-06 6444
源码及组件下载地址：源码及NPOI 2.0和itextsharp-all-5.5.3源码如下：using System;using System.Collections.Generic;using System.Data;using System.Text;using NPOI;using NPOI.HPSF;using NPOI.HSSF;using NPOI.HSSF.UserModel;us
原生js导出excel，并保留样式
张先森的博客
10-25 2690
js导出excel，并保留样式
.net mvc epplus用datatable数据导出excel
最新发布
03-25
可以使用以下代码将 DataTable 中的数据导出为 Excel 文件： ```c# public void ExportDataTableToExcel(DataTable dt, string fileName) { using (ExcelPackage excel = new ExcelPackage()) { // 创建一个工作簿 ExcelWorksheet worksheet = excel.Workbook.Worksheets.Add("Sheet1"); // 将 DataTable 中的数据填充到工作簿中 worksheet.Cells["A1"].LoadFromDataTable(dt, true); // 保存工作簿 FileInfo excelFile = new FileInfo(fileName); excel.SaveAs(excelFile); } } ``` 其中，dt 是要导出的 DataTable，fileName 是要保存的 Excel 文件名。调用这个方法就可以将 DataTable 中的数据导出为 Excel 文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值