hi
when i export grid and gauge to PDF that have Unicode char its not readable..what should i do?
its very important for me.please help me.
its my code.
<script>
$("button").on("click", function () {
var grid = $("#grid").data("kendoGrid");
var progress = $.Deferred();
kendo.drawing.drawDOM($("#gauge-container"))
.done(function (header) {
grid._drawPDF(progress)
.then(function (root) {
return kendo.drawing.exportPDF(root, { multiPage: true });
})
.done(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: "test.pdf"
});
progress.resolve();
})
});
//})
});
</script>
2 Answers, 1 is accepted
Your question is posted in Telerik Reporting forums.
Please check if the Drawing of HTML Elements(Configuration) help article helps you to set fonts properly in your application. If you need further help, please post the question in the corresponding Telerik Kendo UI forum.
Thank you for your understanding.
Regards,
Stef
Telerik
Rank 1
Hello steff
thanks for your answer .but it dose not work for me.sorry that i send message here.but its problem of very people that i know.
i send 2 attachment from my website and when i export to pdf and my code.
in my pdf file font its reverse and not readable.
but in the web page its OK
here is my code
************************************************************************** Code ***********************************************************
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutRep.cshtml";
}
<style>
.k-pdf-export p {
border: 2px solid black;
font-family:Tahoma;
}
.k-pdf-export {
border: 2px solid black;
font-family:Tahoma;
}
/*
Make sure everything in the page template is absolutely positioned.
All positions are relative to the page container.
*/
.page-template > * {
font-family: Tahoma, sans-serif;
font-size: 90%;
}
.page-template .header {
top: 20px;
border-bottom: 1px solid #000;
font-family: Tahoma, sans-serif;
}
.page-template .footer {
bottom: 20px;
border-top: 1px solid #000;
}
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-grid {
font-family: Tahoma, sans-serif;
}
</style>
<div id="grid">
<style type="text/css">
#gauge-container {
background: transparent url(@Url.Content("~/Content/Images/gauge-container2.png")) no-repeat 50% 50%;
width: 304px;
height: 304px;
display:inline-block;
text-align: center;
margin: 0 auto 30px auto;
}
#gauge {
width: 230px;
height: 230px;
margin: 0 auto 0;
}
#gauge2 {
width: 230px;
height: 230px;
margin: 0 auto 0;
}
#gauge3 {
width: 230px;
height: 230px;
margin: 0 auto 0;
}
#gauge4 {
width: 230px;
height: 230px;
margin: 0 auto 0;
}
</style>
<label >گزارش پیشرفت فعالیت </label>
<div id="header">
<button class="k-button">pdf </button>
</div>
<script>
$("button").on("click", function () {
var grid = $("#grid").data("kendoGrid");
var progress = $.Deferred();
kendo.drawing.drawDOM($("#gauge-container"))
.done(function (header) {
// kendo.drawing.drawDOM($("#footer"))
// .done(function(footer) {
grid._drawPDF(progress)
.then(function (root) {
// root.children.unshift(header);
// root.children.push(footer);
return kendo.drawing.exportPDF(root, { multiPage: true });
})
.done(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: "test.pdf"
});
progress.resolve();
})
});
//})
});
</script>
<div id="gauge-container">
@(Html.Kendo().RadialGauge()
.Name("gauge")
.Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
.Scale(scale => scale
.MinorUnit(5)
.Max(100)
.Min(0)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(0).To(50).Color("#ffc700");
ranges.Add().From(50).To(100).Color("#7fd87f");
ranges.Add().From(0).To(5).Color("#c20000");
})
)
)
<div style="color:black;">
<input type="text" value="تسایتسی" />
</div>
</div>
<div id="gauge-container">
@(Html.Kendo().RadialGauge()
.Name("gauge2")
.Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
.Scale(scale => scale
.MinorUnit(5)
.Max(100)
.Min(0)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(0).To(50).Color("#ffc700");
ranges.Add().From(50).To(100).Color("#7fd87f");
ranges.Add().From(0).To(5).Color("#c20000");
})
)
)
<label>
گیج واقعی
</label>
</div>
<div id="gauge-container">
@(Html.Kendo().RadialGauge()
.Name("gauge3")
.Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
.Scale(scale => scale
.MinorUnit(5)
.Max(100)
.Min(-100)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(0).To(-50).Color("#ffc700");
ranges.Add().From(0).To(100).Color("#7fd87f");
ranges.Add().From(-50).To(-100).Color("#c20000");
})
)
)
<label>
گیج انحراف
</label>
</div>
<div id="gauge-container">
@(Html.Kendo().RadialGauge()
.Name("gauge4")
.Pointer(pointer => pointer.Value(Mabnaa.Functions.CalculateReport.Cal(int.Parse(Request.Params["Id2"].ToString()))))
.Scale(scale => scale
.MinorUnit(5)
.Max(100)
.Min(0)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(0).To(50).Color("#ffc700");
ranges.Add().From(50).To(100).Color("#7fd87f");
ranges.Add().From(0).To(5).Color("#c20000");
})
)
)
<label>
گیج درصد انحراف
</label>
</div>
<script>
$(".export-pdf").click(function () {
var gauge = $("#gauge").getKendoRadialGauge();
gauge.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "chart.pdf",
proxyURL: "//demos.telerik.com/kendo-ui/service/export"
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".box").bind("change", refresh);
window.configuredRanges = $("#gauge").data("kendoRadialGauge").options.scale.ranges;
});
function refresh() {
var gauge = $("#gauge").data("kendoRadialGauge"),
showLabels = $("#labels").prop("checked"),
showRanges = $("#ranges").prop("checked"),
positionInputs = $("input[name='labels-position']"),
labelsPosition = positionInputs.filter(":checked").val(),
options = gauge.options;
options.transitions = false;
options.scale.labels = options.scale.labels || {};
options.scale.labels.visible = showLabels;
options.scale.labels.position = labelsPosition;
options.scale.ranges = showRanges ? window.configuredRanges : [];
gauge.redraw();
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".box").bind("change", refresh);
window.configuredRanges = $("#gauge2").data("kendoRadialGauge").options.scale.ranges;
});
function refresh() {
var gauge = $("#gauge2").data("kendoRadialGauge"),
showLabels = $("#labels").prop("checked"),
showRanges = $("#ranges").prop("checked"),
positionInputs = $("input[name='labels-position']"),
labelsPosition = positionInputs.filter(":checked").val(),
options = gauge.options;
options.transitions = false;
options.scale.labels = options.scale.labels || {};
options.scale.labels.visible = showLabels;
options.scale.labels.position = labelsPosition;
options.scale.ranges = showRanges ? window.configuredRanges : [];
gauge.redraw();
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".box").bind("change", refresh);
window.configuredRanges = $("#gauge3").data("kendoRadialGauge").options.scale.ranges;
});
function refresh() {
var gauge = $("#gauge3").data("kendoRadialGauge"),
showLabels = $("#labels").prop("checked"),
showRanges = $("#ranges").prop("checked"),
positionInputs = $("input[name='labels-position']"),
labelsPosition = positionInputs.filter(":checked").val(),
options = gauge.options;
options.transitions = false;
options.scale.labels = options.scale.labels || {};
options.scale.labels.visible = showLabels;
options.scale.labels.position = labelsPosition;
options.scale.ranges = showRanges ? window.configuredRanges : [];
gauge.redraw();
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".box").bind("change", refresh);
window.configuredRanges = $("#gauge4").data("kendoRadialGauge").options.scale.ranges;
});
function refresh() {
var gauge = $("#gauge4").data("kendoRadialGauge"),
showLabels = $("#labels").prop("checked"),
showRanges = $("#ranges").prop("checked"),
positionInputs = $("input[name='labels-position']"),
labelsPosition = positionInputs.filter(":checked").val(),
options = gauge.options;
options.transitions = false;
options.scale.labels = options.scale.labels || {};
options.scale.labels.visible = showLabels;
options.scale.labels.position = labelsPosition;
options.scale.ranges = showRanges ? window.configuredRanges : [];
gauge.redraw();
}
</script>
</div>
<script>
$("#grid").kendoGrid({
pdf: {
allPages: true,
// landscape: true,
DefaultFontFamily: "Arial Unicode MS",
},
});
</script>
***************************************************************************************** end *************************************************
thanks