datatable 匯出無亂碼中文pdf檔案

我乙個前端程式設計師，最近老大要我出乙個報表ui，並跟我說要支援pdf匯出，因為這個報表資料回頭要發給部門老大看，pdf顯得正式點，然後，我就開始了各種找外掛程式之旅。。。

首先，介紹下我們的專案背景：ui使用datatable。當我去看datatable官網的時候，很高興，有現成的匯出外掛程式：datatable匯出外掛程式，簡直讓我欣喜若狂呀，不過如果這麼簡單就把需求做好了，那我也就沒有下文可寫了。

datatable 畢竟是老外寫的，所以並不支援中文，即：匯出的中文都是亂碼。作為中國人，是不是有點不可忍？(對於我來說，是的！！！)

**如下

lang="zh-cn">
charset="utf-8">
my first export pdftitle>
src="pdfmake.min.js">
script>
src="方正vfs_fonts.js">
script>
function
down
(data) 
};pdfmake.fonts = ,
方正姚體: 
};pdfmake.createpdf(dd).download();
}script>
head>
body>
html>

為什麼回到datatable extension呢？因為datatable extension已經把要匯出的內容寫好了，我們要匯出pdf檔案，直接把匯出內容用createpdf()方法匯出即可。

一起來讀一讀來看看datatable extension的原始碼：button.html5.js。

js有點基礎的讀起來應該問題不大，而這個button.html5.js也就一千多行**，其中匯出pdf檔案相關的目測才300多行，不信你們看看：

有了之前咱們匯出pdf中文無亂碼的經驗，那在button.html5.js先找到createpdf()這個方法，然後再該方法之前增加咱們相應的pdfmake.fonts

_pdfmake().fonts = ,
方正姚體: ,
//    微軟雅黑: 
};var pdf = _pdfmake().createpdf( doc );

在**中可以看到，我給微軟雅黑字型預留了個位置，以後我的vsf_font.js有了微軟雅黑之後就可以直接使用微軟雅黑字型了。

從以上**可以看到，createpdf該方法裡邊的doc就是生成pdf檔案的配置了，咱們再花點精力往直前看看doc具體是什麼

ok，如果你剛才在pdfmake官網有留意的話，不難發現，這就是標準的pdfmake匯出檔案的配置物件，並且使用的table布局匯出。當然最後的defaultstyle中的font: 『方正姚體』就是我配置好的檔案匯出的字型。

如果想再深入看看匯出的內容，可以看看table>body的rows

從中可以看到，rows就是datable extension給我們生成的**的所有內容，如果你不想逐行讀**，可以直接console.log(rows)看看裡邊的內容具體是什麼，跟自己要匯出的內容是否對的上(肯定是對的上的啦。。。)

前端頁面寫乙個簡單的table，然後咱們來試試效果吧。

table是用datatable生成的，**如下：

$('.datatable').datatable(],
// "searching": true
"bdestroy": true,
// "bserverside": true,
// "sajaxsource": "",
"data": [, , , , , , , , , , , ],
"aocolumns": [, , ],
"olanguage": ,
"oaria": 
},"aocolumndefs": 
});

其中buttons的配置參考datatable extension的文件去好好看看咯datatables.net/extensions/buttons/examples

匯出pdf無中文亂碼結果：

剛剛前面有提到，我們極有可能遇到：某個資料要標紅顯示的需求，那麼我們來實現一下吧，讓**第五行的第二列標紅.

要實現需求，本質上就是定位到我們需求的位置，然後對需求內容樣式更改下即可。要定位到需求位置，就在rows裡邊去找吧。

生成rows的時候，遍歷了一下data.body。ok,顯然，我們在data.body遍歷的時候去定位就可以了

**如下

for ( var i=0, ien=data.body.length ; iif(i==4)
};}else ;
}} ) );
}else;
} ) );
}}

再來看看匯出效果：

經過了以上從懵懵懂懂，到最後的應用游刃有餘，我想說的不僅僅是乙個pdf中文無亂碼匯出前端js功能，更重要的是我們對技術追求的學習力。技術是乙個無邊的海陽，我們不可能掌握所有的技術。尤其是我們在工作的時候，更多的是需要什麼，然後去學習什麼。

包括目前現有的各種外掛程式，當其中某一種部分不能滿足我們需求的時候，不妨來讀讀原始碼，甚至可以嘗試改改原始碼，輕而易舉就能把需求漂亮完成咯

datatable 匯出無亂碼中文pdf檔案

DataTable中的資料匯出Excel檔案

php匯出csv檔案無亂碼示例

datatable匯出到excel檔案

datatable 匯出無亂碼中文pdf檔案

DataTable中的資料匯出Excel檔案

php匯出csv檔案無亂碼示例

datatable匯出到excel檔案

相關推薦