【发布时间】：2017-10-19 03:34:51
【问题描述】：
单击导出为 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 example
-
非常感谢您的回复。对我来说，员工姓名和代码占位符未显示在下载的 pdf 文件中。请帮帮我。单击导出查看下载的文件。 codepen.io/anon/pen/bWyjOR
-
哦，我明白了，您希望导出文本框中的占位符文本（带有占位符文本（“员工代码”和“员工姓名”））吗？
-
将此标记为与您的原始问题 input placeholder not appearing in Kendo ui grid Export to PDF 完全相同。所以让我们继续讨论吧。
-
没错，我想要导出文件的文本框中的占位符文本。请帮帮我。
标签： input kendo-ui placeholder export-to-pdf