-2
PDF로 내보내기를 클릭하면 위치 표시자가 표시되지 않습니다. 자리 표시자가 직원 코드 및 직원 이름을 표시하지 않습니다.Kendo UI in PDF로 내보내기
직원 코드 및 직원 이름 열에 자리 표시자를 추가 했는데도.
다음 링크를 확인하고 해결책을 제안하십시오.
참조 링크 : https://codepen.io/anon/pen/bWyjOR
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/pdf-export/page-layout">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif;}
.pdf-page{
padding-top:25px;
}
.empcode{
margin-left:40px;margin-top:20px;
}
input::-moz-placeholder {
color: red !important;
}
input:-ms-input-placeholder {
color: red !important;
}
input::-webkit-input-placeholder {
color: red !important;
} </style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="page-container">
<div class="pdf-page size-a4">
<div class="empcode">
Employee Code: <input data-bind="code" type="text" placeholder="Employee Code"> <input data-bind="name" type="text" placeholder="Employee Name">
</div>
<div class="box-col empcode">
<h4>Get PDF</h4>
<button class="export-pdf k-button" onclick="getPDF('.pdf-page')">Export</button>
</div>
<div class="empcode">
<p>Example</p>
<a href="http://codepen.io/anon/pen/pPxrKa">http://codepen.io/anon/pen/pPxrKa</div>
</div>
</div>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.pdf-page {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"WebComponentsIcons" : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="../content/shared/js/pako.min.js"></script>
<script>
function getPDF(selector) {
kendo.drawing.drawDOM($(selector)).then(function(group){
kendo.drawing.pdf.saveAs(group, "Invoice.pdf");
});
}
$(document).ready(function() {
var data = [
{ productName: "QUESO CABRALES", unitPrice: 21, qty: 5 },
{ productName: "ALICE MUTTON", unitPrice: 39, qty: 7 },
{ productName: "GENEN SHOUYU", unitPrice: 15.50, qty: 3 },
{ productName: "CHARTREUSE VERTE", unitPrice: 18, qty: 1 },
{ productName: "MASCARPONE FABIOLI", unitPrice: 32, qty: 2 },
{ productName: "VALKOINEN SUKLAA", unitPrice: 16.25, qty: 3 }
];
var schema = {
model: {
productName: { type: "string" },
unitPrice: { type: "number", editable: false },
qty: { type: "number" }
},
parse: function (data) {
$.each(data, function(){
this.total = this.qty * this.unitPrice;
});
return data;
}
};
var aggregate = [
{ field: "qty", aggregate: "sum" },
{ field: "total", aggregate: "sum" }
];
var columns = [
{ field: "productName", title: "Product", footerTemplate: "Total"},
{ field: "unitPrice", title: "Price", width: 120},
{ field: "qty", title: "Pcs.", width: 120, aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "total", title: "Total", width: 120, aggregates: ["sum"], footerTemplate: "#=sum#" }
];
var grid = $("#grid").kendoGrid({
editable: false,
sortable: true,
dataSource: {
data: data,
aggregate: aggregate,
schema: schema,
},
columns: columns
});
$("#paper").kendoDropDownList({
change: function() {
$(".pdf-page")
.removeClass("size-a4")
.removeClass("size-letter")
.removeClass("size-executive")
.addClass(this.value());
}
});
});
</script>
<style>
.pdf-page {
margin: 0 auto;
box-sizing: border-box;
box-shadow: 0 5px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
color: #333;
position: relative;
}
.pdf-header {
position: absolute;
top: .5in;
height: .6in;
left: .5in;
right: .5in;
border-bottom: 1px solid #e5e5e5;
}
.invoice-number {
padding-top: .17in;
float: right;
}
.pdf-footer {
position: absolute;
bottom: .5in;
height: .6in;
left: .5in;
right: .5in;
padding-top: 10px;
border-top: 1px solid #e5e5e5;
text-align: left;
color: #787878;
font-size: 12px;
}
.pdf-body {
position: absolute;
top: 3.7in;
bottom: 1.2in;
left: .5in;
right: .5in;
}
.size-a4 { width: 8.3in; height: 11.7in; }
.size-letter { width: 8.5in; height: 11in; }
.size-executive { width: 7.25in; height: 10.5in; }
.company-logo {
font-size: 30px;
font-weight: bold;
color: #3aabf0;
}
.for {
position: absolute;
top: 1.5in;
left: .5in;
width: 2.5in;
}
.from {
position: absolute;
top: 1.5in;
right: .5in;
width: 2.5in;
}
.from p, .for p {
color: #787878;
}
.signature {
padding-top: .5in;
}
</style>
</div>
</body>
</html>
직원 코드가 표시됩니다. [Dojo 예제] (http://dojo.telerik.com/eVotu) – Sandman
답장을 보내 주셔서 대단히 감사합니다. 나에게 직원 이름과 코드 자리 표시자는 다운로드 한 pdf 파일에 표시되지 않습니다. 제발 도와주세요. 내보내기를 클릭하면 다운로드 한 파일을 볼 수 있습니다. https://codepen.io/anon/pen/bWyjOR –
아, 내 텍스트 상자에 텍스트 ("직원 코드"및 "직원 이름")와 함께 내 보낸 텍스트 상자 내의 자리 표시 자 텍스트를 원하십니까? – Sandman