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

---

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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

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

入門

要啟用PDF導(dǎo)出：

1. 包括相應(yīng)的工具欄命令并設(shè)置導(dǎo)出設(shè)置。

• 工具欄配置
• PDF導(dǎo)出配置

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

要通過代碼啟動(dòng)PDF導(dǎo)出，請(qǐng)調(diào)用saveAsPdf方法。

注意：

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

下面的示例演示如何啟用Grid的PDF導(dǎo)出功能。

<!-- 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>

配置

導(dǎo)出所有頁面

默認(rèn)情況下，Kendo UI Grid僅導(dǎo)出當(dāng)前數(shù)據(jù)頁面，要導(dǎo)出所有頁面，請(qǐng)將allPages選項(xiàng)設(shè)置為true。

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

<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)容適合紙張尺寸

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

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

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

注意：

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

<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>

---