简体   繁体   English

Angular的Kendo UI PDF导出组件

[英]Kendo UI PDF Export component for Angular

I'm using Kendo for exporting a component into PDF. 我正在使用Kendo将组件导出为PDF。 The problem is it doesn't print properly and the PDF generator can't handle some elements on my page. 问题是它无法正确打印,PDF生成器无法处理我页面上的某些元素。 Can I resolve this or do I need to make a separate view for this PDF generator? 我可以解决此问题,还是需要为此PDF生成器创建单独的视图?

Kendo pdfexport 剑道pdfexport 我要导出的组件 导出的pdf文件

I guess you can use a Page Template to customize your PDF output. 我猜您可以使用页面模板来自定义PDF输出。 I´m not sure which elements are not handle properly but definitely you have more power with page template. 我不确定哪些元素处理不当,但绝对是你有更强大的页面模板功能。

All you need is to nest a <ng-template> tag with the kendoGridPDFTemplate directive inside the <kendo-grid-pdf> component. 您只需要在<ng-template> kendo <kendo-grid-pdf>组件中嵌入带有kendoGridPDFTemplate指令的<ng-template>标记。

Here is a Telerik example: https://stackblitz.com/run/ 这是Telerik的例子: https//stackblitz.com/run/

and some documentation: https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export/#toc-specifying-page-template 和一些文档: https//www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export/#toc-specifying-page-template

Seems like you are missing some font. 好像你缺少一些字体。 Do you have it added in your domain? 你在你的域名中添加了它吗? Check this link: https://www.telerik.com/kendo-angular-ui/components/pdfexport/embedded-fonts/ 请访问此链接: https//www.telerik.com/kendo-angular-ui/components/pdfexport/embedded-fonts/

Also, if you want to change only the style of the printed view, you can use the .k-pdf-export class in your css to change the view as you wish, without having to change all the page. 此外,如果您只想更改打印视图的样式,可以使用css中.k-pdf-export类来根据需要更改视图,而无需更改所有页面。 For example, hidden the buttons: 例如,隐藏按钮:

.k-pdf-export button {
   visibility: hidden; 
}

Live example here: 这里的实例:

https://stackblitz.com/edit/angular-stack-55588085-printpdf?file=styles.css https://stackblitz.com/edit/angular-stack-55588085-printpdf?file=styles.css

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM