Web开发实用技能，看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: "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中文网！