jquery导出excel、pdf等[tableExport简单

说明

最近有在前端导出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字体

1. 制作自定义pdfmaker字体的方法 https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
2. 网上下载已经制作好的自定义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: '微软雅黑'
              }
          }
      },});
});