jube-fork/Jube.App/wwwroot/kendo/examples/pdf-export/page-layout.html

<!DOCTYPE html>
<html>
<head>
    <title>Page Layout</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
	<div class="box wide hidden-on-narrow">
		<div class="box-col">
			<h4>Select Page size</h4>
			<select id="paper" style="width: 100px;">
				<option value="size-a4" selected>A4</option>
				<option value="size-letter">Letter</option>
				<option value="size-executive">Executive</option>
			</select>
		</div>
		<div class="box-col">
			<h4>Get PDF</h4>
			<button class="export-pdf k-button" onclick="getPDF('.pdf-page')">Export</button>
		</div>
	</div>

	<div class="page-container hidden-on-narrow">
		<div class="pdf-page size-a4">
			<div class="inner-page">
				<div class="pdf-header">
					<span class="company-logo">
						<img src="../content/web/framework/company-logo.png" /> Blauer See Delikatessen
					</span>
					<span class="invoice-number">Invoice #23543</span>
				</div>
				<div class="pdf-footer">
					<p>
						Blauer See Delikatessen<br />
						Lützowplatz 456<br />
						Berlin, Germany,  10785
					</p>
				</div>
				<div class="addresses">
					<div class="for">
						<h3>Invoice For</h3>
						<p>
							Antonio Moreno<br />
							Naucalpan de Juárez<br />
							México D.F., Mexico, 53500
						</p>
					</div>

					<div class="from">
						<h3>From</h3>
						<p>
							Hanna Moos <br />
							Lützowplatz 456<br />
							Berlin, Germany,  10785
						</p>
						<p>
							Invoice ID: 23543<br />
							Invoice Date: 12.03.2014<br />
							Due Date: 27.03.2014
						</p>
					</div>
				</div>
				<div class="pdf-body">
					<div id="grid"></div>
					<p class="signature">
						Signature: ________________ <br /><br />
						Date: 12.03.2014
					</p>
				</div>
			</div>
		</div>
	</div>

	<div class="responsive-message"></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 }
			];
			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: 90 },
			  { field: "qty", title: "Pcs.", width: 90, aggregates: ["sum"], footerTemplate: "#=sum#" },
			  { field: "total", title: "Total", width: 100, 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 {
			position: relative;
			margin: 0 auto;
			padding: .4in .3in;
			color: #333;
			background-color: #fff;
			box-shadow: 0 5px 10px 0 rgba(0,0,0,.3);
			box-sizing: border-box;
		}

		.pdf-header {
			padding-bottom: .2in;
			margin-bottom: .3in;
			border-bottom: 1px solid #e5e5e5;
		}

		.invoice-number {
			padding-top: .1in;
			float: right;
		}

		.pdf-footer {
			position: absolute;
			bottom: .25in;
			left: .3in;
			right: .3in;
			padding-top: 0.05in;
			border-top: 1px solid #e5e5e5;
			font-size: 0.9em;
			text-align: left;
			color: #787878;
		}

		.addresses {
			font-size: 12px;
		}

			.addresses:after {
				display: block;
				content: "";
				clear: both;
			}

		.for {
			float: left;
		}

		.from {
			float: right;
		}

		.addresses p {
			color: #787878;
			padding: .05in 0;
			border-top: 1px solid #e5e5e5;
		}

			.addresses p:first-of-type {
				border-top: 0;
			}

		.pdf-body {
			margin-top: .3in;
		}

		.company-logo {
			font-size: 1.8em;
			font-weight: bold;
			color: #3aabf0;
		}

		.signature {
			padding-top: .3in;
		}

		/* Dimensions other than px and em should be divided by 1.33 for the proper PDF output */
		.size-a4 {
			width: 6.2in;
			height: 8.7in;
		}

		.size-letter {
			width: 6.3in;
			height: 8.2in;
		}

		.size-executive {
			width: 5.4in;
			height: 7.8in;
			font-size: 12px;
		}

		.size-executive .pdf-header {
			margin-bottom: .1in;
		}
	</style>

</div>


    
</body>
</html>