提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|产品更新|编辑:龚雪|2020-07-31 10:30:02.490|阅读 184 次
概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,其Grid小部件提供内置的PDF导出功能。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
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导出过程中,模板被放置在具有指定纸张尺寸的容器中,支持的页面模板变量为:
注意:要使用页面模板,您必须设置纸张尺寸。
<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: "//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: "//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: "//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" : "//kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans.ttf", "DejaVu Sans|Bold" : "//kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Bold.ttf", "DejaVu Sans|Bold|Italic" : "//kendo.cdn.telerik.com/2020.2.617/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf", "DejaVu Sans|Italic" : "//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: "//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>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:慧都网知名C/C++开发工具CLion全新发布v2024.3,新版本新语言引擎有显著改进等,欢迎下载新版体验!
强大的VS插件CodeRush已正式发布v24.2.3,新版本现在可以运行xUnit.Net v3测试等,欢迎下载最新版体验!
Spire.PDF 10.12.4 最新版本支持在进行多页打印时设置自动旋转方向。同时,一些已知问题也在本次更新中被成功修复,例如打印 PDF 文档时内容丢失的问题,欢迎下载体验~
日程安排控件dhtmlxScheduler v7.2全新发布,新版本增强并增加了编辑、修改等多个操作体验,欢迎下载最新版试用~
全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。
Kendo UI for jQuery完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢