說明

最近有在前端導出excel等常用格式的需求斋枢，經過網(wǎng)上查找各種辦法，最后準備使用jquery的插件tableExport來實現(xiàn)導入導出知给，測試和使用該插件期間還是有一點坑的杏慰，在此記錄一下遇到的問題和解決辦法。

下載地址

插件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導出中文會出現(xiàn)亂碼；同時谒主，該插件還可以使用pdfmake來導出朝扼，pdfmaker的默認字體vfs_fonts.js不支持中文，需要經過制作自定義pdfmaker字體才能正常導出中文霎肯。

可以使用以下兩種方法制作自定義pdfmaker字體

1. 制作自定義pdfmaker字體的方法 https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
2. 網(wǎng)上下載已經制作好的自定義pdfmaker字體
   我將整個測試demo打包放在了地址：https://download.csdn.net/download/u012905332/10308999
   (自定義pdfmaker字體為網(wǎng)友制作的微軟雅黑字體擎颖，放在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: '微軟雅黑'
              }
          }
      },});
});