PDF Export
The Diagram provides a built-in PDF export functionality.
For a runnable example, refer to the demo on exporting the Diagram to PDF.
Getting Started
To enable PDF export in the Diagram:
- Introduce a button and handle its
clickevent. Export the Diagram within the handler.
<button class='export-pdf k-button'>Save as PDF</button>
<script>
$(".export-pdf").click(function () {
$("#diagram").getKendoDiagram().saveAsPDF();
});
</script>
- Include the Pako Deflate library in the page to enable compression.
To enable PDF export in the Diagram through code, call the saveAsPdf method.
<button class='export-pdf k-button'>Save as PDF</button>
@(Html.Kendo().Diagram()
.Name("diagram")
.Pdf(pdf => pdf
.FileName("Kendo UI Diagram Export.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Diagram"))
)
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Pdf_Export_Read", "Diagram")
)
.Model(m => m.Children("Items"))
)
.Editable(false)
.Layout(l => l.Type(DiagramLayoutType.Layered))
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
)
.ConnectionDefaults(cd => cd
.Stroke(s => s
.Color("#979797")
.Width(2)
)
)
.Events(events => events.DataBound("onDataBound"))
)
<kendo-diagram name="diagram" on-data-bound="onDataBound">
<pdf file-name="Kendo UI Diagram Export.pdf" proxy-url="@Url.Action("Pdf_Export_Save", "Diagram" )" />
<hierarchical-datasource server-operation="false">
<transport>
<read url="@Url.Action("Pdf_Export_Read", "Diagram")" />
</transport>
<schema>
<hierarchical-model children="Items"></hierarchical-model>
</schema>
</hierarchical-datasource>
<editable enabled="false" />
<layout type="DiagramLayoutType.Layered"></layout>
<shape-defaults visual="visualTemplate"></shape-defaults>
<connection-defaults>
<stroke color="#979797" width="2" />
</connection-defaults>
</kendo-diagram>
<script>
$(".export-pdf").click(function () {
$("#diagram").getKendoDiagram().saveAsPDF();
});
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: "@Url.Content("~/content/dataviz/diagram/people/")" + dataItem.Image,
x: 3,
y: 3,
width: 68,
height: 68
}));
return g;
}
function onDataBound() {
this.bringIntoView(this.shapes);
}
</script>