说明
最近有在前端导出excel等常用格式的需求，经过网上查找各种办法，最后准备使用jquery的插件tableExport来实现导入导出，测试和使用该插件期间还是有一点坑的，在此记录一下遇到的问题和解决办法。
下载地址
插件tableExport地址：https://github.com/hhurz/tableExport.jquery.plugin
基本用法
引入插件
【jquery导出excel、pdf等[tableExport简单使用]】html部分
js部分
$("#export").click(function(){
$("#tables").tableExport({
type:"excel",
escape:"false",
});
});
引入插件
html部分
js部分
$("#export").click(function(){
$("#tables").tableExport({
type:"xlsx",
escape:"false",
});
});
引入插件
html部分
js部分
$("#export").click(function(){
$("#tables").tableExport({
type:"png",
escape:"false",
});
});
- 导出pdf
经过测试，该插件默认使用了jsPDF，而jsPDF导出中文会出现乱码；同时，该插件还可以使用pdfmake来导出，pdfmaker的默认字体vfs_fonts.js不支持中文，需要经过制作自定义pdfmaker字体才能正常导出中文。
可以使用以下两种方法制作自定义pdfmaker字体
- 制作自定义pdfmaker字体的方法 https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
- 网上下载已经制作好的自定义pdfmaker字体
我将整个测试demo打包放在了地址：https://download.csdn.net/download/u012905332/10308999
(自定义pdfmaker字体为网友制作的微软雅黑字体，放在plugin/tableExport/libs/pdfmake/cn_font/vfs_fonts.js中)
准备好自定义字体后仍需要修改tableExport.js（或tableExport.min.js）中的代码，修改部分如下：
将以下部分
pdfMake.fonts = {
Roboto: {
normal:'Roboto-Regular.ttf',
bold:'Roboto-Medium.ttf',
italics:'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
}
};
修改为
pdfMake.fonts = {
Roboto: {
normal:'Roboto-Regular.ttf',
bold:'Roboto-Medium.ttf',
italics:'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
'微软雅黑': {
normal: 'msyh.ttf',
bold: 'msyh.ttf',
italics: 'msyh.ttf',
bolditalics: 'msyh.ttf'
}
};
以下为代码部分
引入插件
html部分
js部分
$("#export_pdf").click(function(){
//导出
$("#tables").tableExport({
type:"pdf",
escape:"false",
pdfmake: {
enabled: true,
docDefinition: {
pageOrientation: 'landscape',
defaultStyle: {
font: '微软雅黑'
}
}
},});
});
推荐阅读
