Kendo UI for jQuery数据管理使用教程：PDF导出（二）

82550495

2020-08-03

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

使用服务器代理

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

在服务器上保存文件

要将生成的文件发送到远程服务，请将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: "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>

嵌入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" : "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="//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绘图模块的所有已知限制都适用。
不支持导出分层网格。
当网格启用锁定（冻结）列时，不支持PDF导出。如果该算法决定将节点移至下一页，则其后的所有DOM节点也将被移动，尽管在当前页上可能有足够的空间用于部分节点。
Kendo UI Grid内置PDF导出选项可以导出具有定义页面大小的页面上尽可能多的列。如果列不适合，将被裁剪。如果需要支持更多页面上可以容纳的列，请改用并行PDF导出方法。

了解最新Kendo UI最新资讯，请关注Telerik中文网！