如何解决如何使用PDF导出和自定义模板设置Kendo Ui图？
我试图在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 举报，一经查实，本站将立刻删除。