jube-fork/Jube.App/wwwroot/kendo/examples/diagram/pdf-export.html

<!DOCTYPE html>
<html>
<head>
    <title>PDF Export</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="box wide">
        <h4>Export diagram view</h4>
        <div class="box-col">
            <button class='export-pdf k-button'>Save as PDF</button>
        </div>
    </div>
    <div class="demo-section k-content wide">
        <div id="diagram"></div>
    </div>
    <script>
        $(".export-pdf").click(function() {
            $("#diagram").getKendoDiagram().saveAsPDF();
        });

        function createDiagram() {
            var data = [{
                firstName: "Antonio",
                lastName: "Moreno",
                image: "antonio.jpg",
                title: "Team Lead",
                colorScheme: "#1696d3",
                items: [{
                    firstName: "Elizabeth",
                    image: "elizabeth.jpg",
                    lastName: "Brown",
                    title: "Design Lead",
                    colorScheme: "#ef6944",
                    items: [{
                        firstName: "Ann",
                        lastName: "Devon",
                        image: "ann.jpg",
                        title: "UI Designer",
                        colorScheme: "#ef6944"
                    }]
                }, {
                    firstName: "Diego",
                    lastName: "Roel",
                    image: "diego.jpg",
                    title: "QA Engineer",
                    colorScheme: "#ee587b",
                    items: [{
                        firstName: "Fran",
                        lastName: "Wilson",
                        image: "fran.jpg",
                        title: "QA Intern",
                        colorScheme: "#ee587b"
                    }]
                }, {
                    firstName: "Felipe",
                    lastName: "Izquiedro",
                    image: "felipe.jpg",
                    title: "Senior Developer",
                    colorScheme: "#75be16",
                    items: [{
                        firstName: "Daniel",
                        lastName: "Tonini",
                        image: "daniel.jpg",
                        title: "Developer",
                        colorScheme: "#75be16"
                    }]
                }]
            }];

            function visualTemplate(options) {
                var dataviz = kendo.dataviz;
                var g = new dataviz.diagram.Group();
                var dataItem = options.dataItem;

                g.append(new dataviz.diagram.Rectangle({
                    width: 210,
                    height: 75,
                    stroke: {
                        width: 0
                    },
                    fill: dataItem.colorScheme
                }));

                /*
                    Use the DejaVu Sans font for display and embedding in the PDF file.
                    The standard PDF fonts have no support for Unicode characters.
                */
                g.append(new dataviz.diagram.TextBlock({
                    text: dataItem.firstName + " " + dataItem.lastName,
                    fontFamily: "DejaVu Sans",
                    fontSize: "14px",
                    x: 85,
                    y: 20,
                    fill: "#fff"
                }));

                g.append(new dataviz.diagram.TextBlock({
                    text: dataItem.title,
                    fontFamily: "DejaVu Sans",
                    fontSize: "14px",
                    x: 85,
                    y: 40,
                    fill: "#fff"
                }));

                g.append(new dataviz.diagram.Image({
                    source: "https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/" + dataItem.image,
                    x: 3,
                    y: 3,
                    width: 68,
                    height: 68
                }));

                return g;
            }

            $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: data,
                    schema: {
                        model: {
                            children: "items"
                        }
                    }
                }),
                layout: {
                    type: "layered"
                },
                shapeDefaults: {
                    visual: visualTemplate
                },
                connectionDefaults: {
                    stroke: {
                        color: "#979797",
                        width: 2
                    }
                }
            });

            var diagram = $("#diagram").getKendoDiagram();
            diagram.bringIntoView(diagram.shapes);
        }

        $(document).ready(createDiagram);
        $(document).bind("kendo:skinChange", createDiagram);
    </script>

    <script>
        // Import DejaVu Sans font for embedding

        // NOTE: Only required if the Kendo UI stylesheets are loaded
        // from a different origin, e.g. cdn.kendostatic.com
        kendo.pdf.defineFont({
            "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "WebComponentsIcons"      : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
        });
    </script>

    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/pako_deflate.min.js"></script>
</div>


    
</body>
</html>