說明

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

下載地址

插件tableExport地址：https://github.com/hhurz/tableExport.jquery.plugin

基本用法

• 導(dǎo)出excel(xls格式)

引入插件

<!--引入相關(guān)插件,注意jquery插件的版本號(hào)要大于等于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>
<!--導(dǎo)出按鈕,id為export-->
<input type="button" id="export" value="導(dǎo)出"/>

js部分

<!--初始化插件-->
$("#export").click(function(){
    $("#tables").tableExport({
        type:"excel",
        escape:"false",
    });
});

• 導(dǎo)出excel(xlsx格式)

引入插件

<!--引入相關(guān)插件,注意jquery插件的版本號(hào)要大于等于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>
<!--導(dǎo)出按鈕,id為export-->
<input type="button" id="export" value="導(dǎo)出"/>

js部分

<!--初始化插件-->
$("#export").click(function(){
    $("#tables").tableExport({
        type:"xlsx",
        escape:"false",
    });
});

• 導(dǎo)出png

引入插件

<!--引入相關(guān)插件,注意jquery插件的版本號(hào)要大于等于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>
<!--導(dǎo)出按鈕,id為export-->
<input type="button" id="export" value="導(dǎo)出"/>

js部分

<!--初始化插件-->
$("#export").click(function(){
    $("#tables").tableExport({
        type:"png",
        escape:"false",
    });
});

• 導(dǎo)出pdf
  經(jīng)過測(cè)試，該插件默認(rèn)使用了jsPDF，而jsPDF導(dǎo)出中文會(huì)出現(xiàn)亂碼；同時(shí)，該插件還可以使用pdfmake來導(dǎo)出，pdfmaker的默認(rèn)字體vfs_fonts.js不支持中文，需要經(jīng)過制作自定義pdfmaker字體才能正常導(dǎo)出中文。

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

1. 制作自定義pdfmaker字體的方法 https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
2. 網(wǎng)上下載已經(jīng)制作好的自定義pdfmaker字體
   我將整個(gè)測(cè)試demo打包放在了地址：https://download.csdn.net/download/u012905332/10308999
   (自定義pdfmaker字體為網(wǎng)友制作的微軟雅黑字體，放在plugin/tableExport/libs/pdfmake/cn_font/vfs_fonts.js中)

準(zhǔn)備好自定義字體后仍需要修改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'
 }
};

以下為代碼部分
引入插件

<!--引入相關(guān)插件,注意jquery插件的版本號(hào)要大于等于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>
<!--導(dǎo)出按鈕,id為export_pdf-->
<input type="button" id="export_pdf" value="導(dǎo)出"/>

js部分

<!--初始化插件-->
$("#export_pdf").click(function(){
  //導(dǎo)出
  $("#tables").tableExport({
      type:"pdf",
      escape:"false",
      pdfmake: {
          enabled: true,
          docDefinition: {
              pageOrientation: 'landscape',
              defaultStyle: {
                  font: '微軟雅黑'
              }
          }
      },});
});