use custom fonts in PDF export of a drawDOM

2 posts, 0 answers
  1. Chi Man
    Chi Man avatar
    9 posts
    Member since:
    Apr 2013

    Posted 17 Feb Link to this post

    Hi.

     I export my PDF using the following functions:

    $(".export-pdf").click(function() {
               // Convert the DOM element to a drawing using kendo.drawing.drawDOM
               var fileName = $(this).data('val');
               kendo.drawing.drawDOM($("#" + $(this).data('val')))
                    .then(function(group) {
                        // Render the result as a PDF file
                        return kendo.drawing.exportPDF(group, {
                            paperSize: "auto",
                            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                        });
                    })
                    .done(function(data) {
                        // Save the PDF file
                        kendo.saveAs({
                            dataURI: data,
                            fileName: fileName + ".pdf",
                            //proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                        });
                    });
                });

     

    according to this document: http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Custom

     I have defined the font though kendo.pdf.definefont:

    kendo.pdf.defineFont({"Verdana" : "/fonts/Verdana.ttf", // this is a URL"Verdana|Bold" : "/fonts/Verdana_Bold.ttf","Verdana|Bold|Italic" : "/fonts/Verdana_Bold_Italic.ttf","Verdana|Italic" : "/fonts/Verdana_Italic.ttf"});

    However, i am not sure how to tell the drawDOM object to use the font being defined. because in the example:

    var text = new drawing.Text("Hello World", new geo.Point(100, 100));

    text.options.set("font", "30px Verdana");

     

    drawing.Text have to be filled with particular text but now i need all the text in the DOM drawing with the custome font.

    Thank you.

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 19 Feb Link to this post

    Hi,

    The drawDOM method will read the font names from the computed style of the element.
    Therefore you need to set the element to use Verdana in the document itself:

    .my-content {
          font-family: Verdana, sans-serif;
    }

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top