New to Telerik UI for ASP.NET Core? Download free 30-day trial

PDF Export

The Telerik UI for ASP.NET Core Gantt component provides a built-in PDF export functionality.

For a runnable example, refer to the demo on exporting the Gantt to PDF.

Getting Started

To enable PDF export:

  1. Include the corresponding toolbar command and set the export settings.
  2. Include the Pako Deflate library in the page to enable compression.

The following example demonstrates how to enable the PDF export functionality of the Gantt.

    <!-- Load Pako Deflate library to enable PDF compression -->
    <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Toolbar(tb =>
        {
            tb.Pdf();
        })
        .Pdf(pdf => pdf
            .FileName("Gantt Export.pdf")
        )
        //...additional Gantt configuration...
    )
    <!-- Load Pako Deflate library to enable PDF compression -->
    <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

    <kendo-gantt name="gantt">
        <toolbars>
            <toolbar name="pdf">
            </toolbar>
        </toolbars>
        <pdf file-name="Gantt Export.pdf">
        </pdf>
        <!--  ...additional Gantt configuration...  -->
    </kendo-gantt>

Saving Files on the Server

To send the generated file to a remote endpoint, use the ProxyURL() and ForceProxy() methods.

    <!-- Load Pako Deflate library to enable PDF compression -->
    <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Toolbar(tb =>
        {
            tb.Pdf();
        })
        .Pdf(pdf => pdf
            .FileName("Gantt Export.pdf")
            .ForceProxy(true)
            .ProxyURL(Url.Action("PdfExportSave", "Home"))
        )
        //...additional Gantt configuration...
    )
    <!-- Load Pako Deflate library to enable PDF compression -->
    <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

    <kendo-gantt name="gantt">
        <toolbars>
            <toolbar name="pdf">
            </toolbar>
        </toolbars>
        <pdf file-name="Gantt Export.pdf" 
             force-proxy="true" 
             proxy-url="@Url.Action("PdfExportSave", "Home")">
        </pdf>
    </kendo-gantt>
    [HttpPost]
    public ActionResult PdfExportSave(string contentType, string base64, string fileName)
    {
        var fileContents = Convert.FromBase64String(base64);
        return File(fileContents, contentType, fileName);
    }

Embedding Unicode Characters

The default fonts in PDF files do not provide Unicode support. To support international characters, you have to embed an external font. For more information on the supported Deja Vu font family as part of the Kendo UI distributions and other fonts, refer to the Kendo UI for jQuery article on custom fonts and PDF.

The following example demonstrates how to handle custom fonts.

    <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-gantt {
            font-family: "DejaVu Sans", "Arial", sans-serif;
        }

        /* Hide the Gantt toolbar during export */
        .k-pdf-export .k-gantt-toolbar {
            display: none;
        }
    </style>

Further Reading

See Also

In this article