jquery 怎么通过tableexport 将html导出pdf文件

jquery 怎么通过tableexport 将html导出pdf文件,第1张

现一个老外写的不错的jquery插件,可以实现将HTML

表格导出为excel,pdf等格式,

地址在:

https://github.com/kayalshri/

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

Java代码 收藏代码

<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导出,足够用了

1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist修改Auto Activation triggers for java的值为:zjava,点击apply按钮;

如图

2.继续打开JavaScript→Editor→Content Assist修改Auto Activation triggers for javaScript的值为:zjs,点击apply按钮;

如图:

3.继续打开web→html Files→Editor→Content Assist修改Prompt when these characters are inserted:的值为:zhtml ,点击apply按钮;

如图:

4.打开File→Export→Genral→Preferences→导出一文件到任意位置,然后用记事本打开此文件 ,Ctrl+F查找 zjava 然后将其值改为:                          .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW

再查找 zjs,然后将其值改为: .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW

再查找 zhtml,然后将其值改为:  <=.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW

保存文件。

5.打开eclipse→File→Import→Genral→Preferences,导入刚刚编辑的文件后,所有设置完毕,现在去测试一下。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6151362.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存