2016年3月7日 星期一

Kendo UI Grid 匯出 PDF 中文變方塊解法

  • 第一階段:先讓Kendo Grid可以匯出PDF
1.在Grid上顯示匯出PDF按鈕
$("#grid").kendoGrid({
    //...
    toolbar: ["pdf"],
    pdf: {
        allPages: true
    }
}); 
2.載入 pako_deflate.min.js 啟用壓縮 PDF 功能
<script src="Kendo/js/pako_deflate.min.js"></script>
  • 第二階段:自訂中文字型
1.定義支援Unicode的TrueType中文字型,以下以DFKai-SB為例:
@font-face {
    font-family: "DFKai-SB";
    src: url("Kendo/styles/fonts/KaiU/kaiu.ttf") format("truetype");
}
2.透過CSS讓Kendo Grid(.k-grid)使用自訂的DFKai-SB字型:
.k-grid {
    font-family: "DFKai-SB";
}

2 則留言:

  1. 抱歉 我試用您的方法後,PDF只有中間有中文,但是顯示的中文都破損很嚴重,此外因為我是用在Scheduler套件,他連表頭日期的部分也無法顯示中文...

    回覆刪除
    回覆
    1. 確認一下表頭/表身每個div的字型是否有指定中文字型

      刪除