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