如何使用PDF导出和自定义模板设置Kendo Ui图？

编程问答 2022-08-14

问题描述

我试图在Kendo Ui图上查找为什么PDF导出不能与模板一起使用。 pdf属性date和fileName可以正常工作。我错过了整个currentDate标题。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/diagram/pdf-export">
    <style>html { font-size: 14px; font-family: Arial,Helvetica,sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.metroblack.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.metroblack.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
    
    

</head>
<body>
<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 type="x/kendo-template" id="page-template">
            # var currentDate = new Date().toLocaleDateString(); #
            <div class="page-template">
                <div class="header">
                        <div style="float: right">Date: #: currentDate #</div>
                </div>
            </div>
        </script>
  
    <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
                }));

                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,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"
                        }
                    }
                }),pdf: {  
                  date: new Date().toLocaleDateString(),fileName: "name.pdf",template: $("#page-template").html()
                },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>

</div>


</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

diagramkendo-datavizkendo-ui