JQuery Plugin-TableExport實現前端表格的導出功能(已解決表格pdf導出中文格式問題)

前言

• 最近在整一個前端的一個測試工具，使用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天的時間，希望其他小夥伴使用的過程中能夠更快實現自己的需求。
  

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

---

遇到的問題及解決

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

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

pdfMake git地址： https://github.com/bpampuch/pdfmake

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

自定義字體方法：https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side

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

親測解決了pdf中文顯示問題：http://download.csdn.net/detail/loopop/9619477?locationNum=3
這是 js 導出 中文pdf 解決方法：http://www.jb51.net/article/88397.htm

使用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插件支持前端表格導出格式多樣，非常好用。
• 其他格式導出的使用還請下載鏈接，這裏不再說明。
• 最後非常感謝這些博主博客對我的幫助：

http://godlewis.iteye.com/blog/2335834
http://www.jb51.net/article/88397.htm
http://download.csdn.net/detail/loopop/9619477?locationNum=3

測試代碼（最後的乾貨）

Demo：http://download.csdn.net/detail/sxpsxp12/9742293
pdfMake自定義字體文件： http://download.csdn.net/detail/sxpsxp12/9742296