JQuery Plugin-TableExport实现前端表格的导出功能(已解决表格pdf导出中文格式问题)
2017-01-20 16:04
956 查看
前言
最近在整一个前端的一个测试工具,使用Express+Nodejs实现后台功能。为了能够实现前端表格的导出功能,各种尝试发现tableExport是一个很不错的插件。因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。可以从下面的地址下载TableExport插件;该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF格式,支持的导出格式还是挺多的,基本能满足自己的需求。
因为github上作者给出的插件的使用描述已经很详细了,我就不在这里赘述很多重复的东西了(具体怎么使用该插件,还请麻烦移步tableExport的git上)。简述:我们可以通过下载插件,然后放到自己的工程路径下,使用’script’标签做路径引用能够很好实现Json、XML、CSV、TSV、TXT、SQL、Word、Excel格式的导出。
该插件pdf格式的导出有一些中文问题,现在已经解决,但是PNG格式的导出测试在火狐浏览器中会显示图片不全的问题,在360浏览器中正常使用,而在微软自带浏览器中所有导出功能都不能正常使用,其他浏览器没有测试,看来该插件的使用和浏览器的内核有很大关系。
下面给出我使用过程中遇到的问题及一些尝试解决的方法,同时会在最后附上纯表格导出的代码链接,以tableExport为例子做一个demo,希望达到这样的目的:想要实现前端表格的导出功能的小伙伴能够在这个博客得到需要的,因为自己在tableExport这个插件上耗费了整整2天的时间,希望其他小伙伴使用的过程中能够更快实现自己的需求。
tableExport插件 https://github.com/hhurz/tableExport.jquery.plugin
遇到的问题及解决
主要遇到的问题是pdf的中文问题。因为该插件pdf格式的导出使用了jspdf,而jspdf不支持中文的导出,通过查看tableTable.js关于pdf导出代码,发现还可以使用pdfmake来实现pdf的导出。而该插件中并未包含pdfmake的js相关代码,因此首先下载了pdfmake并引用到工程中。pdfmake是纯js,有很强大的排版功能。下面是pdfmake的git地址
pdfMake git地址: https://github.com/bpampuch/pdfmake
pdfmake 的字体vfs_fonts.js不支持中文,可以通过自定义字体来实现中文的pdf导出,下面是关于自定义pdfmake字体的方法:
自定义字体方法:https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
我在网上找到了现成的编译好字体的pdfmake(下载耗费了我5个积分,还好资源很好用,耶!):
亲测解决了pdf中文显示问题:http://download.csdn.net/detail/loopop/9619477?locationNum=3
这是 js 导出 中文pdf 解决方法:http://www.jb51.net/article/88397.htm
使用TableExport实现前端表格的pdf中文导出
!!!我是干货!!!首先将下载的tableExport目录拷贝到工程的目录下,并重命名“tableExport.jquery.plugin-master”为“tableExport”,同时将“pdfmake-master”目录下的build目录拷贝到“tableExport”目录下,并重命名为“pdfMake”;
将已经生成的微软雅黑的字体文件”vfs_fonts.js”,替换pdfMake目录中的“vfs_fonts.js”。
修改tableExport目录下的tableExport.js文件,将类型为pdf的判断下的代码替换:
替换前: var docDefinition = { pageOrientation: 'landscape', content: [ { table: { headerRows: $hrows.length, widths: widths, body: body } } ] };
替换后: pdfMake.fonts = { Roboto: { normal: 'Roboto-Regular.ttf', bold: 'Roboto-Medium.ttf', italics: 'Roboto-Italic.ttf', bolditalics: 'Roboto-Italic.ttf' }, 微软雅黑: { normal: 'msyh.ttf', bold: 'msyhbd.ttf', italics: 'msyh.ttf', bolditalics: 'msyhbd.ttf' } }; var docDefinition = { pageOrientation: 'landscape', content: [ { table: { headerRows: $hrows.length, widths: widths, body: body } } ], defaultStyle: { font: '微软雅黑' } };
4.最后将引用:tableExport.min.js修改成tableExport.js
<script type="text/javascript" src="./tableExport/tableExport.js"></script>
效果
总结
png格式的导出在火狐浏览器显示不全,360浏览器显示正常。其他浏览器没有测试hhurz的tableExport.jquery.plugin插件支持前端表格导出格式多样,非常好用。
其他格式导出的使用还请下载链接,这里不再说明。
最后非常感谢这些博主博客对我的帮助:
http://godlewis.iteye.com/blog/2335834
http://www.jb51.net/article/88397.htm
http://download.csdn.net/detail/loopop/9619477?locationNum=3
测试代码(最后的干货)
Demo:http://download.csdn.net/detail/sxpsxp12/9742293pdfMake自定义字体文件: http://download.csdn.net/detail/sxpsxp12/9742296
相关文章推荐
- JQuery Plugin-TableExport实现前端表格的导出功能(已解决表格pdf导出中文格式问题)
- Jox(解决了日期格式转化和导出XML中文乱码问题)
- 水晶报表导出为pdf, word , excel 格式(已经测试过,实现了该功能)
- 使用struts2实现下载功能遇到的文件中文问题解决经验分享
- jasperreport6 导出pdf中文不显示问题解决方式
- 利用html5实现类似微信的手机摇一摇功能,并播放音乐,并且解决中文乱码的问题。
- java操作pdf(解决中文导出问题)
- 利用DhtmlXtree实现展现,修改,添加,删除,移动功能一棵树上实现,iframe的单个滑动条显示,包含在iframe中树节点中文内容过长问题解决
- itop 2.2 导出PDF中文乱码问题解决
- pdfmake实现中文支持,解决中文乱码问题
- sl3中的DataGrid中的数据导出到Excel中 使用csv格式 解决中文是乱码的问题
- 水晶报表导出为pdf, word , excel 格式(已经测试过,实现了该功能)
- 水晶报表导出为pdf, word , excel 格式(已经测试过,实现了该功能)
- dokuwiki + dw2pdf 插件,解决导出pdf文件中文乱码(字体问题,显示小方块)
- 使用crypto模块实现md5加密功能(解决中文加密前后端不一致的问题)
- 用Struts2更好的实现文件的上传、下载功能以及解决中文名称问题
- php的IMAP的应用实例(实现收发邮件、删除邮件、附件下载等功能,解决中文乱码问题)
- asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台
- [已解决]MSTR报表以PDF格式导出后中文汉字不能显示
- 解决BootStrap Table表格中含中文时点击导出数据无响应的问题(Uncaught INVALID_CHARACTER_ERR: DOM Exception 5)