前言

• 最近在整一個前端的一個測試工具，使用Express+Nodejs實現後臺功能。為了能夠實現前端表格的匯出功能，各種嘗試發現tableExport是一個很不錯的外掛。因此最後選擇了hhurz的JQuery Plugin來實現表格的匯出功能。

• 可以從下面的地址下載TableExport外掛；該外掛可以將Html的表格匯出成為 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF格式，支援的匯出格式還是挺多的，基本能滿足自己的需求。

• 因為github上作者給出的外掛的使用描述已經很詳細了，我就不在這裡贅述很多重複的東西了（具體怎麼使用該外掛，還請麻煩移步tableExport的git上）。簡述：我們可以通過下載外掛，然後放到自己的工程路徑下，使用’script’標籤做路徑引用能夠很好實現Json、XML、CSV、TSV、TXT、SQL、Word、Excel格式的匯出。
• 該外掛pdf格式的匯出有一些中文問題，現在已經解決，但是PNG格式的匯出測試在火狐瀏覽器中會顯示圖片不全的問題，在360瀏覽器中正常使用，而在微軟自帶瀏覽器中所有匯出功能都不能正常使用，其他瀏覽器沒有測試，看來該外掛的使用和瀏覽器的核心有很大關係。
• 下面給出我使用過程中遇到的問題及一些嘗試解決的方法,同時會在最後附上純表格匯出的程式碼連結，以tableExport為例子做一個demo，希望達到這樣的目的：想要實現前端表格的匯出功能的小夥伴能夠在這個部落格得到需要的，因為自己在tableExport這個外掛上耗費了整整2天的時間，希望其他小夥伴使用的過程中能夠更快實現自己的需求。
  

遇到的問題及解決

• 主要遇到的問題是pdf的中文問題。

  因為該外掛pdf格式的匯出使用了jspdf，而jspdf不支援中文的匯出，通過檢視tableTable.js關於pdf匯出程式碼，發現還可以使用pdfmake來實現pdf的匯出。而該外掛中並未包含pdfmake的js相關程式碼，因此首先下載了pdfmake並引用到工程中。pdfmake是純js，有很強大的排版功能。下面是pdfmake的git地址

• pdfmake 的字型vfs_fonts.js不支援中文，可以通過自定義字型來實現中文的pdf匯出，下面是關於自定義pdfmake字型的方法：

• 我在網上找到了現成的編譯好字型的pdfmake(下載耗費了我5個積分，還好資源很好用，耶！)：

使用TableExport實現前端表格的pdf中文匯出

！！！我是乾貨！！！

1. 首先將下載的tableExport目錄拷貝到工程的目錄下，並重命名“tableExport.jquery.plugin-master”為“tableExport”，同時將“pdfmake-master”目錄下的build目錄拷貝到“tableExport”目錄下，並重命名為“pdfMake”；
2. 將已經生成的微軟雅黑的字型檔案”vfs_fonts.js”，替換pdfMake目錄中的“vfs_fonts.js”。
3. 修改tableExport目錄下的tableExport.js檔案，將型別為pdf的判斷下的程式碼替換：

替換前：

var docDefinition = {
                pageOrientation: 'landscape',
                content: [
                    {
                        table: {
                            headerRows: $hrows.length,
                            widths: widths,
                            body: body
                        }
                    }
                ]
            };

替換後：

pdfMake.fonts = {
                Roboto: {
                    normal: 'Roboto-Regular.ttf',
                    bold: 'Roboto-Medium.ttf',
                    italics: 'Roboto-Italic.ttf',
                    bolditalics: 'Roboto-Italic.ttf'
                },
                微軟雅黑: {
                    normal: 'msyh.ttf',
                    bold: 'msyhbd.ttf',
                    italics: 'msyh.ttf',
                    bolditalics: 'msyhbd.ttf'
                }
            };
var docDefinition = {
                pageOrientation: 'landscape',
                content: [
                    {
                        table: {
                            headerRows: $hrows.length,
                            widths: widths,
                            body: body
                        }
                    }
                ],
                defaultStyle: {
                    font: '微軟雅黑'
                }
            };

4.最後將引用：tableExport.min.js修改成tableExport.js

<script type="text/javascript" src="./tableExport/tableExport.js"></script>

效果

總結

• png格式的匯出在火狐瀏覽器顯示不全，360瀏覽器顯示正常。其他瀏覽器沒有測試
• hhurz的tableExport.jquery.plugin外掛支援前端表格匯出格式多樣，非常好用。
• 其他格式匯出的使用還請下載連結，這裡不再說明。
• 最後非常感謝這些博主部落格對我的幫助：

測試程式碼（最後的乾貨）