Kendo UI for jQuery數據管理使用教程：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)建現代Web應用程序的最完整UI庫。

Grid小部件提供內置的PDF導出功能。

入門

要啟用PDF導出：

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

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

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

要通過代碼啟動PDF導出，請調用saveAsPdf方法。

注意：

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

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

<!-- Load Pako Deflate library to enable PDF compression -->
<script src="https://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: "https://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僅導出當前數據頁面，要導出所有頁面，請將allPages選項設置為true。

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

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true
},
dataSource: {
type: "odata",
transport: {
read: "https://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>

使內容適合紙張尺寸

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

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

• 調整列寬來填滿頁面，因此請避免在所有列上設置寬度。
• 更改每頁的行數，并在適當的位置放置分頁符。
• 省略工具欄和pager。

注意：

• 為了使其內容適合紙張大小，所有記錄必須立即呈現。
• 確切的最大可導出行數將取決于瀏覽器、系統(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: "https://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>

---

了解最新Kendo UI最新資訊，請關注Telerik中文網！