彩票走势图

Kendo UI for jQuery数据管理使用教程:PDF导出(一)

翻译|产品更新|编辑:龚雪|2020-07-24 10:07:54.530|阅读 159 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,其Grid小部件提供内置的PDF导出功能。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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="//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: "//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: "//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: "//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>


慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP