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)出功能。

配置

指定頁面模板

Grid允許您指定頁面模板，并使用該模板定位內(nèi)容、添加頁眉、頁腳和其他元素，通過使用CSS完成導(dǎo)出文檔的樣式。在PDF導(dǎo)出過程中，模板被放置在具有指定紙張尺寸的容器中，支持的頁面模板變量為：

• pageNumber
• totalPages

注意：要使用頁面模板，您必須設(shè)置紙張尺寸。

<style>
body {
font-family: "DejaVu Serif";
font-size: 12px;
}

.page-template {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.page-template .header {
position: absolute;
top: 30px;
left: 30px;
right: 30px;

border-bottom: 1px solid #888;

text-align: center;
font-size: 18px;
}

.page-template .footer {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
}
</style>

<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
Acme Inc.
</div>
<div class="footer">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
</div>
</div>
</script>

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true,
paperSize: "A4",
margin: { top: "3cm", right: "1cm", bottom: "1cm", left: "1cm" },
landscape: true,
template: $("#page-template").html()
},
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>

使用服務(wù)器代理

Internet Explorer 9和Safari不支持用于保存文件的選項(xiàng)，并且需要實(shí)現(xiàn)服務(wù)器代理。 要指定服務(wù)器代理URL，請(qǐng)?jiān)O(shè)置proxyURL選項(xiàng)。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "/proxy"
},
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>

在服務(wù)器上保存文件

要將生成的文件發(fā)送到遠(yuǎn)程服務(wù)，請(qǐng)將proxyUrl和forceProxy設(shè)置為true。 如果代理返回204 No Content，則客戶端上將不會(huì)出現(xiàn)“另存為...”對(duì)話框。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
forceProxy: true,
proxyURL: "/proxy"
},
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>

嵌入U(xiǎn)nicode字符

PDF文件中的默認(rèn)字體不提供Unicode支持。 要支持國(guó)際字符，您必須嵌入外部字體。

下面的示例演示如何處理自定義字體。

<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>

<script>
// Import DejaVu Sans font for embedding

// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. kendo.cdn.telerik.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>

<!-- Load Pako ZLIB 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: {
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>

已知局限性

• HTML繪圖模塊的所有已知限制都適用。
• 不支持導(dǎo)出分層網(wǎng)格。
• 當(dāng)網(wǎng)格啟用鎖定（凍結(jié)）列時(shí)，不支持PDF導(dǎo)出。 如果該算法決定將節(jié)點(diǎn)移至下一頁，則其后的所有DOM節(jié)點(diǎn)也將被移動(dòng)，盡管在當(dāng)前頁上可能有足夠的空間用于部分節(jié)點(diǎn)。
• Kendo UI Grid內(nèi)置PDF導(dǎo)出選項(xiàng)可以導(dǎo)出具有定義頁面大小的頁面上盡可能多的列。 如果列不適合，將被裁剪。 如果需要支持更多頁面上可以容納的列，請(qǐng)改用并行PDF導(dǎo)出方法。

---

了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！