一个不错的能将HTML表格导出为excel,pdf等的jquery插件

jackyrong

浏览: 7936424 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

发现一个老外写的不错的jquery插件，可以实现将HTML
表格导出为excel,pdf等格式，
地址在：
https://github.com/kayalshri/

下面看个例子，实现导出表格到excel,pdf


<html>
			<head>
				<title>Export html table to excel and csv using jquery</title>
			<script src="/jquery-1.9.1.min.js"></script>
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
				<script type="text/javascript" src="/jquery.base64.js"></script>

				<script type="text/javascript" src=/tableExport.js"></script>
             
                     <script type="text/javascript" src="/jspdf/libs/sprintf.js">
                      </script>
                   
					    <script type="text/javascript" src="http://localhost:8082/myphp/tableExport.jquery.plugin-master/jspdf/jspdf.js"></script>
						 <script type="text/javascript" src="/jspdf/base64.js"></script>
					  
			</head>
			<body>
				[align=right]
					<br><br><br>			
					<button class="btn btn-success" onClick ="$('#customers').tableExport({type: 'excel', escape: 'false'});">Excel Export</button>
					<button class="btn btn-success" onClick ="$('#customers').tableExport({type: 'pdf', escape: 'false'});">CSV Export</button>
					<br><br>
					[/align]
					<table id="customers" class="table table-striped table-bordered" >
						<thead>			
							<tr class='warning'>
								<th>Country</th>
								<th>Population</th>
								<th>Date</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Chinna</td>
								<td>1,363,480,000</td>
								<td>March 24, 2014</td>
							</tr>
							<tr>
								<td>India</td>
								<td>1,241,900,000</td>
								<td>March 24, 2014</td>
							</tr>
							<tr>
								<td>United States</td>
								<td>317,746,000</td>
								<td>March 24, 2014</td>
							</tr>
							<tr>
								<td>Indonesia</td>
								<td>249,866,000</td>
								<td>July 1, 2013</td>
							</tr>
							<tr>
								<td>Brazil</td>
								<td>201,032,714</td>
								<td>July 1, 2013</td>
							</tr>
						</tbody>
					</table> 
				</div>
			</body>
		</html>

其实生成PDF,EXCEL的原理，始终就是利用data:application/vnd.ms等去生成的，利用了base64，具体代码可以参考github上代码拿来看看，对于处理简单的EXCEL,PDF导出，足够用了

0
顶

1
踩

分享到：

jackson中@jsonview的自定义处理 | 如何对待用户的意见

2014-12-24 10:50
浏览 86020
评论(19)
分类:Web前端
查看更多

19 楼能抗能打 2016-12-06

生成pdf中文乱码导出Excel布局和边框都没了求大手子发一份Demo到Email中 249014659@qq.com 非常感谢

18 楼 SYN_030915 2016-11-17

生成pdf中文乱码导出Excel布局和边框都没了

求大神发一份Demo到Email中 m18519104848@163.com 非常感谢

17 楼最是季美丽 2016-06-18

jesron 写道

http://my.oschina.net/aruan/blog/418980
我也是遇到中文乱码，上面网址是网上搜索的解决方法，试了可用

替换了jquery.base64.js内容导出pdf时中文还是乱码额求问成功的人是不是还有额外的操作？

16 楼 1146689803 2016-05-26

非常好，可以用，本来是要做echarts导出excel的，想了一个办法，把数据直接放在table里面，然后display：none。但是我发现display：none导出来就没东西了。于是把所以的颜色都设置了白色，就可以正常导出了。而且解决了虚线的问题

15 楼 jesron 2016-04-19

http://my.oschina.net/aruan/blog/418980
我也是遇到中文乱码，上面网址是网上搜索的解决方法，试了可用

14 楼 liu4187915336 2016-04-18

中文会乱码，求个前端大神来优化一下，表格也没有边框和分割线!!!!!!!!!!!
对于中文报错的原因，只需要改一个地方就可以了，
jquery.base64.js里面如下：

  function _getbyte( s, i ) {
    var x = s.charCodeAt( i );
    if ( x > 255 ) {
      throw "INVALID_CHARACTER_ERR: DOM Exception 5";
    }
    return x;
  }

改成

  function _getbyte( s, i ) {
    var x = s.charCodeAt( i );
    if ( x > 65536 ) {
      throw "INVALID_CHARACTER_ERR: DOM Exception 5";
    }
    return x;
  }

写这个插件的是老外，不会考虑到中文，unicode码值255以下是非中文

13 楼 JeffreyColbert 2015-08-28

as53315 写道

中文报错乱码。。

DataTables导出CSV、PDF中文乱码解决方法

12 楼 as53315 2015-07-13

中文报错乱码。。

11 楼 zkw0710 2015-06-12

楼主的例子可以导出，有了中文就不行了，也没有报错

10 楼 weibo227 2015-04-07

还有就是IE浏览器下直接弹出一个新的窗口，兼容性问题是硬伤啊!!!

9 楼 weibo227 2015-04-07

我这边也测试了，只要表格中有中文就报错了，

uncaught exception: INVALID_CHARACTER_ERR: DOM Exception 5

对于中文，该怎么处理啊？？？

8 楼 sharonyshi 2015-03-20

请问，我测试的时候下载excel是空的。这个问题怎么解决？

7 楼 beamstar 2015-03-11

大哥表格中出现中文就出错哇

6 楼 aa492497996 2015-01-16

为啥我我报错？Uncaught TypeError: Object [object Object] has no method 'tableExport' ，我引进js了，为啥不行

5 楼 leehow1988 2015-01-04

这个你试过中文嘛？我的中文貌似乱码

4 楼 jackyrong 2014-12-25

你是出错在什么地方，上面已经给出代码了呀，你把JS的路径改成你应用的就可以了呀

3 楼我会是微博 2014-12-25

jackyrong 写道

通过了呀，可以导出EXCEL,PDF

能否将你的Demo发我一份，Email:392929114@qq.com
谢谢！

2 楼 jackyrong 2014-12-25

通过了呀，可以导出EXCEL,PDF

1 楼我会是微博 2014-12-25

你测试过了吗？反正我用你这代码看不到任何效果

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论