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

入门

要启用PDF导出：

1. 包括相应的工具栏命令并设置导出设置。

工具栏配置
PDF导出配置

2. 在页面中包含Pako Deflate库来启用压缩。

要通过代码启动PDF导出，请调用saveAsPdf方法。

注意：

默认情况下，Kendo UI Grid导出数据的当前页面并应用排序、过滤、分组和聚合。
Grid使用当前的列顺序、可见性和尺寸来生成PDF文件。

下面的示例演示如何启用Grid的PDF导出功能。

<!-- Load Pako Deflate library to enable PDF compression -->
<script src="https://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: "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>

配置

导出所有页面

默认情况下，Kendo UI Grid仅导出当前数据页面，要导出所有页面，请将allPages选项设置为true。

注意：当allPages选项设置为true并启用serverPaging时，网格将对所有数据发出"read"请求。如果数据项太多，浏览器可能会无响应。在这种情况下，请使用服务器端导出。

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

使内容适合纸张尺寸

默认情况下，导出文档的纸张大小由屏幕上网格的大小确定。这意味着，如果每个数据页面的网格大小不一致，则文档可以包含不同尺寸的页面。

您可以指定将应用于整个文档的纸张尺寸，内容将按比例缩放适合指定的纸张尺寸。例如，可以覆盖自动比例因子，以便为其他页面元素腾出空间。要使用所有可用空间，网格将：

调整列宽来填满页面，因此请避免在所有列上设置宽度。
更改每页的行数，并在适当的位置放置分页符。
省略工具栏和pager。

注意：

为了使其内容适合纸张大小，所有记录必须立即呈现。
确切的最大可导出行数将取决于浏览器、系统资源、模板复杂性和其他因素。
一个好的做法是在要支持的每种浏览器中验证自己的最坏情况。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true,
paperSize: "A4",
landscape: true,
scale: 0.75
},
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>

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

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/4449265

标签

odata