Kendo UI for jQuery數(shù)據(jù)管理使用教程：PDF導出（一）

---

Kendo UI for jQuery R2 2020 SP1試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

Grid小部件提供內(nèi)置的PDF導出功能。

入門

要啟用PDF導出：

1. 包括相應的工具欄命令并設置導出設置。

• 工具欄配置
• PDF導出配置

2. 在頁面中包含Pako Deflate庫來啟用壓縮。

要通過代碼啟動PDF導出，請調(diào)用saveAsPdf方法。

注意：

• 默認情況下，Kendo UI Grid導出數(shù)據(jù)的當前頁面并應用排序、過濾、分組和聚合。
• Grid使用當前的列順序、可見性和尺寸來生成PDF文件。

下面的示例演示如何啟用Grid的PDF導出功能。

<!-- Load Pako Deflate library to enable PDF compression -->
<script src="http://kendo.cdn.telerik.com/2020.2.617/js/pako_deflate.min.js"></script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
fileName: "Kendo UI Grid Export.pdf"
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

配置

導出所有頁面

 默認情況下，Kendo UI Grid僅導出當前數(shù)據(jù)頁面，要導出所有頁面，請將allPages選項設置為true。

注意：當allPages選項設置為true并啟用serverPaging時，網(wǎng)格將對所有數(shù)據(jù)發(fā)出"read"請求。如果數(shù)據(jù)項太多，瀏覽器可能會無響應。 在這種情況下，請使用服務器端導出。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

使內(nèi)容適合紙張尺寸

 默認情況下，導出文檔的紙張大小由屏幕上網(wǎng)格的大小確定。 這意味著，如果每個數(shù)據(jù)頁面的網(wǎng)格大小不一致，則文檔可以包含不同尺寸的頁面。

 您可以指定將應用于整個文檔的紙張尺寸，內(nèi)容將按比例縮放適合指定的紙張尺寸。例如，可以覆蓋自動比例因子，以便為其他頁面元素騰出空間。 要使用所有可用空間，網(wǎng)格將：

• 調(diào)整列寬來填滿頁面，因此請避免在所有列上設置寬度。
• 更改每頁的行數(shù)，并在適當?shù)奈恢梅胖梅猪摲?
• 省略工具欄和pager。

注意：

• 為了使其內(nèi)容適合紙張大小，所有記錄必須立即呈現(xiàn)。
• 確切的最大可導出行數(shù)將取決于瀏覽器、系統(tǒng)資源、模板復雜性和其他因素。
• 一個好的做法是在要支持的每種瀏覽器中驗證自己的最壞情況。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true,
paperSize: "A4",
landscape: true,
scale: 0.75
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

---