-2
Espace réservé ne s'affiche pas lorsque vous cliquez sur Exporter au format PDF. L'espace réservé ne s'affiche pas pour le code de l'employé et le nom de l'employé.UI Kendo dans Exporter au format PDF
Même si j'ai ajouté un espace réservé pour les colonnes Code de l'employé et Nom de l'employé.
Veuillez vérifier le lien ci-dessous et suggérer la solution.
Référence Lien: 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>
Le code employé s'affiche pour moi, voir [Exemple Dojo] (http://dojo.telerik.com/eVotu) – Sandman
Merci beaucoup pour votre réponse. Pour moi, le nom de l'employé et les espaces réservés du code ne s'affichent pas dans le fichier pdf téléchargé. Sil te plait aide moi. Cliquez sur Exporter pour voir le fichier téléchargé. https://codepen.io/anon/pen/bWyjOR –
Oh, je vois, voulez-vous que le texte de l'espace réservé dans les zones de texte à exporter (avec le texte de l'espace réservé ("Code de l'employé" et "Nom de l'employé"))? – Sandman