Adding a Barcode to the Editor and Exporting It to PDF
Environment
| Product | Telerik UI for ASP.NET Core Editor |
Description
I want to have a Barcode inside the Editor and export everything to PDF when working with the Telerik UI for ASP.NET Core components.
Solution
You can achieve this requirement using the following approach:
<div id="barcodeContainer" style="display: none;">
<div style="text-align:center;">
@(Html.Kendo().Barcode().Name("barcode")
.Value("2346722")
.Width(280)
.Height(100))
</div>
</div>
<br />
@(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 100%; height:700px", aria_label = "editor" })
.Pdf(pdf => pdf
.Margin(20, 20, 20, 20)
.PaperSize("A4")
.ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
)
.Tools(tools => tools
.Clear()
.Pdf()
)
.Value(@<text>
<br/>
<p style="text-align:center;">
<span style="font-family:Verdana, Geneva, sans-serif;font-size:large;">
<strong>Click the Export to PDF button</strong>
</span>
</p>
</text>)
)
$(document).ready(function () {
var editor = $("#editor").data().kendoEditor;
var barcode = $("#barcode").data().kendoBarcode;
var image;
barcode.exportImage().done(function (data) {
image = data;
editor.value("<div style='width: 100%; text-align: center;'><img src='" +
image + "'></img>" + "<br/>" + editor.value());
});
});