说明
最近有在前端导出excel等常用格式的需求，经过网上查找各种办法，最后准备使用jquery的插件tableExport来实现导入导出，测试和使用该插件期间还是有一点坑的，在此记录一下遇到的问题和解决办法。
下载地址
插件tableExport地址：https://github.com/hhurz/tableExport.jquery.plugin
基本用法
- 导出excel(xls格式)
引入插件
<!--引入相关插件,注意jquery插件的版本号要大于等于1.9.1--> <script src="plugin/jquery-1.11.3/jquery-1.11.3.min.js"></script> <script src="plugin/tableExport/libs/FileSaver/FileSaver.min.js"></script> <script src="plugin/tableExport/tableExport.min.js"></script>html部分
<!--表格,id为tables--> <table id="tables">...</table> <!--导出按钮,id为export--> <input type="button" id="export" value="导出"/>js部分
<!--初始化插件--> $("#export").click(function(){ $("#tables").tableExport({ type:"excel", escape:"false", }); });
- 导出excel(xlsx格式)
引入插件
<!--引入相关插件,注意jquery插件的版本号要大于等于1.9.1--> <script src="plugin/jquery-1.11.3/jquery-1.11.3.min.js"></script> <script src="plugin/tableExport/libs/FileSaver/FileSaver.min.js"></script> <script src="plugin/tableExport/libs/js-xlsx/xlsx.core.min.js"></script> <script src="plugin/tableExport/tableExport.min.js"></script>html部分
<!--表格,id为tables--> <table id="tables">...</table> <!--导出按钮,id为export--> <input type="button" id="export" value="导出"/>js部分
<!--初始化插件--> $("#export").click(function(){ $("#tables").tableExport({ type:"xlsx", escape:"false", }); });
- 导出png
引入插件
<!--引入相关插件,注意jquery插件的版本号要大于等于1.9.1--> <script src="plugin/jquery-1.11.3/jquery-1.11.3.min.js"></script> <script src="plugin/tableExport/libs/FileSaver/FileSaver.min.js"></script> <script src="plugin/tableExport/libs/html2canvas/html2canvas.min.js"></script> <script src="plugin/tableExport/tableExport.min.js"></script>html部分
<!--表格,id为tables--> <table id="tables">...</table> <!--导出按钮,id为export--> <input type="button" id="export" value="导出"/>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' } };以下为代码部分
引入插件<!--引入相关插件,注意jquery插件的版本号要大于等于1.9.1--> <script src="plugin/jquery-1.11.3/jquery-1.11.3.min.js"></script> <script src="plugin/tableExport/libs/FileSaver/FileSaver.min.js"></script> <script src="plugin/tableExport/libs/pdfmake/pdfmake.min.js"></script> <script src="plugin/tableExport/libs/pdfmake/cn_font/vfs_fonts.js"></script><!--自定义字体--> <script src="plugin/tableExport/tableExport.min.js"></script>html部分
<!--表格,id为tables--> <table id="tables">...</table> <!--导出按钮,id为export_pdf--> <input type="button" id="export_pdf" value="导出"/>js部分
<!--初始化插件--> $("#export_pdf").click(function(){ //导出 $("#tables").tableExport({ type:"pdf", escape:"false", pdfmake: { enabled: true, docDefinition: { pageOrientation: 'landscape', defaultStyle: { font: '微软雅黑' } } },}); });
