标签:data dsc 必须 template style bsp ima pre 最完整
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: "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>
了解最新Kendo UI最新资讯,请关注Telerik中文网!
Kendo UI for jQuery数据管理使用教程:PDF导出(二)
标签:data dsc 必须 template style bsp ima pre 最完整
原文地址:https://www.cnblogs.com/AABBbaby/p/13424506.html