kendo ui font problem in export pdf

2 posts, 0 answers
  1. U
    U avatar
    1 posts
    Member since:
    Feb 2017

    Posted 09 Aug 2017 Link to this post

    Hi Teachers

    I am using Kendoui in asp.net core for reporting for pdf and excel.Report pdf have problem for motherland language not display in export file .pdf.I am add  pdf export code of index.chtml file look like this

    <h2>PDF Report Kendo UI Layout Tutorials</h2>

    <style>
        /*
                Use the DejaVu Sans font for display and embedding in the PDF file.
                The standard PDF fonts have no support for Unicode characters.

                The font-face is declared in the Kendo UI stylesheets.
            */
        @@font-face {
            font-family: "MyanmarLanguage";
            src: url("~/Fonts/Zawgyi-One.ttf") format("truetype");    
        }

        .k-grid {
            /*font-family: "DejaVu Sans", "Arial", ''sans-serif'';*/
            font-family: ''MyanmarLanguage'';
       
        }
       
        /* Hide the Grid header and pager during export */
        .k-pdf-export .k-grid-toolbar,
        .k-pdf-export .k-pager-wrap {
            display: none;
        }
    </style>


    <div class="box wide">
        <p style="margin-bottom: 1em"><b>Important:</b></p>

        <p style="margin-bottom: 1em">
            This page loads
            <a href="https://github.com/nodeca/pako">pako zlib library</a> (pako_deflate.min.js)
            to enable compression in the PDF. This is highly recommended as it improves
            performance and rises the limit on the size of the content that can be exported.
        </p>

        <p>
            The Standard PDF fonts do not include Unicode support.

            In order for the output to match what you see in the browser
            you must provide source files for TrueType fonts for embedding.

            Please read the documentation about
            <a href="http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#custom-fonts-and-pdf">custom fonts</a>
            and
            <a href="http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#using-custom-fonts">drawing</a>.
        </p>
    </div>

    <script type="x/kendo-template" id="page-template">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page #: pageNum # of #: totalPages #</div>
                Multi-page grid with automatic page breaking
            </div>
            <div class="watermark">ပိုင္စိုးသူ</div>
            <div class="footer">
                Page #: pageNum # of #: totalPages #
            </div>
        </div>
    </script>

    <div>
        @(Html.Kendo().Grid<EPGEKendoUI.Models.TestViewModel>()
            .Name("grid")
            .ToolBar(tools => tools.Pdf())
            .Pdf(pdf => pdf
                .AllPages()
                .AvoidLinks()
                .PaperSize("A4")
                .Margin("2cm", "1cm", "1cm", "1cm")
                .Landscape()
                .RepeatHeaders()
                .TemplateId("page-template")
                .FileName("Kendo UI Grid Export.pdf")
                .ProxyURL(Url.Action("ExcelSave", "Grid"))
            )
            .Columns(columns =>
            {
                columns.Bound(p => p.Name);
                columns.ForeignKey(p => p.GenreId, (System.Collections.IEnumerable)ViewData["genres"], "Id", "Name").Title("Genre");
                columns.ForeignKey(p => p.RatingId, (System.Collections.IEnumerable)ViewData["ratings"], "Id", "Name").Title("Rating");
                columns.ForeignKey(p => p.ShopLocationId, (System.Collections.IEnumerable)ViewData["location"], "Id", "Location").Title("ShopLocation");
            })
            .HtmlAttributes(new { style = "height: 550px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("ExcelRead", "Excel"))
                .PageSize(20)
            )
        )
    </div>

    <style>
        /* Page Template for the exported PDF */
        .page-template {
            /*font-family: "DejaVu Sans", "Arial", sans-serif;*/
            font-family : ''MyanmarLanguage'';
            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;
                color: #888;
            }

            .page-template .footer {
                position: absolute;
                bottom: 30px;
                left: 30px;
                right: 30px;
                border-top: 1px solid #888;
                text-align: center;
                color: #888;
            }

            .page-template .watermark {         
                font-weight: bold;
                font-size: 400%;
                text-align: center;
                margin-top: 30%;
                color: #ff0000;
                opacity: 0.1;
                transform: rotate(-35deg) scale(1.7, 1.5);
            }

        /* Content styling */
        .customer-photo {
            display: inline-block;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-size: 32px 35px;
            background-position: center center;
            vertical-align: middle;
            line-height: 32px;
            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
            margin-left: 5px;
        }

        .customer-name {
            display: inline-block;
            vertical-align: middle;
            line-height: 32px;
            padding-left: 3px;
        }
    </style>


    Pleas help me and see out put pdf file attached.

     



  2. Stefan
    Admin
    Stefan avatar
    2293 posts

    Posted 11 Aug 2017 Link to this post

    Hello,

    Thank you for the provided information.

    After inspecting it, if there is no error with loading the ttf files, the font should be exported as expected.

    I can suggest checking the following article on how to use the font packs, the same logic and steps need to be taken if custom ttf is used:

    http://docs.telerik.com/kendo-ui/framework/drawing/how-to/pack-fonts-for-export

    Also, please ensure that all of the requirements listed in the documentation are met:

    http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Custom

    If the issue still occurs, please provide the ttf files, a text which is using this font and I will make a test example in order to inspect it locally. 

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top