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是創建現代Web應用程序的最完整UI庫。

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

配置

指定頁面模板

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

• pageNumber
• totalPages

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

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

使用服務器代理

 Internet Explorer 9和Safari不支持用于保存文件的選項，并且需要實現服務器代理。 要指定服務器代理URL，請設置proxyURL選項。

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

在服務器上保存文件

 要將生成的文件發送到遠程服務，請將proxyUrl和forceProxy設置為true。 如果代理返回204 No Content，則客戶端上將不會出現“另存為...”對話框。

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

嵌入Unicode字符

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

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

<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" : "http://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "http://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "http://kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "http://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: "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>

已知局限性

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

---