社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
最近在整一个前端的一个测试工具,使用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格式的导出使用了jspdf,而jspdf不支持中文的导出,通过查看tableTable.js关于pdf导出代码,发现还可以使用pdfmake来实现pdf的导出。而该插件中并未包含pdfmake的js相关代码,因此首先下载了pdfmake并引用到工程中。pdfmake是纯js,有很强大的排版功能。下面是pdfmake的git地址
pdfMake git地址: https://github.com/bpampuch/pdfmake
自定义字体方法:https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
亲测解决了pdf中文显示问题:http://download.csdn.net/detail/loopop/9619477?locationNum=3
这是 js 导出 中文pdf 解决方法:http://www.jb51.net/article/88397.htm
!!!我是干货!!!
替换前:
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>
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/9742293
pdfMake自定义字体文件: http://download.csdn.net/detail/sxpsxp12/9742296
欢迎各位大佬右侧点赞、关注、打赏,我们再会。。。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!