tableExport.js导出带边框的excel

迈不过友情╰ 2022-05-08 15:16 576阅读 0赞

转载自：[https://blog.csdn.net/langyan122/article/details/79153313][https_blog.csdn.net_langyan122_article_details_79153313]

tableExport.js是一款比较优秀的前端文件导出软件，支持word、excel、pdf、png等多种格式导出，具体用法可以参见：https://github.com/hhurz/tableExport.jquery.plugin

今天在使用tableExport.js导出excel的时候，发现导出的表格没有边框，后来跟踪源码（压缩版格式化后的代码），发现其原理是通过base64的方式来进行文件导出，说白了，就是将表格转成base64，然后另存为excel；将下图这个地方修改了，导出的表格就有边框了。[https://img-blog.csdn.net/20180124172514759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast][https_img-blog.csdn.net_20180124172514759_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]

另外，还有一个单元格样式的问题，因为我单元格里面要显示三位小数，不够三位的要用0补齐，而excel是默认不补齐的，所以在做表格的时候，添加如下属性：

[https://img-blog.csdn.net/20180124172754776?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast][https_img-blog.csdn.net_20180124172754776_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]

此外，表格的一些基本样式，如align，font-weight这些，可以修改一下源码让其识别，这样导出来的excel也带有html相同的样式。

[https://img-blog.csdn.net/20180124172956552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast][https_img-blog.csdn.net_20180124172956552_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]

[https_blog.csdn.net_langyan122_article_details_79153313]: https://blog.csdn.net/langyan122/article/details/79153313
[https_img-blog.csdn.net_20180124172514759_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]: https://img-blog.csdn.net/20180124172514759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[https_img-blog.csdn.net_20180124172754776_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]: https://img-blog.csdn.net/20180124172754776?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[https_img-blog.csdn.net_20180124172956552_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]: https://img-blog.csdn.net/20180124172956552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZ3lhbjEyMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast