@model Brokerage_Managements.Models.BankReciept
@{
Layout = null;
}
@*<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.ContractNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.SerialNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.ContractDate)
</th>
<th>
@Html.DisplayNameFor(model => model.BuyerBrokPCent)
</th>
<th>
@Html.DisplayNameFor(model => model.SellerBrokPCent)
</th>
<th>
@Html.DisplayNameFor(model => model.Quantity)
</th>
<th>
@Html.DisplayNameFor(model => model.Rate)
</th>
<th>
@Html.DisplayNameFor(model => model.RateInfo)
</th>
<th>
@Html.DisplayNameFor(model => model.Payment)
</th>
<th>
@Html.DisplayNameFor(model => model.TotalSellerCommission)
</th>
<th>
@Html.DisplayNameFor(model => model.TotalCommission)
</th>
<th>
@Html.DisplayNameFor(model => model.TotalCost)
</th>
<th>
@Html.DisplayNameFor(model => model.TotalAmount)
</th>
<th>
@Html.DisplayNameFor(model => model.UpdateDate)
</th>
<th>
@Html.DisplayNameFor(model => model.OpeningBalance)
</th>
<th>
@Html.DisplayNameFor(model => model.Debit)
</th>
<th>
@Html.DisplayNameFor(model => model.Credit)
</th>
<th>
@Html.DisplayNameFor(model => model.ClosingBalance)
</th>
<th>
@Html.DisplayNameFor(model => model.instruction)
</th>
<th>
@Html.DisplayNameFor(model => model.Letterlines)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th>
@Html.DisplayNameFor(model => model.CommodityEntry.CommodityName)
</th>
<th>
@Html.DisplayNameFor(model => model.DeliveryEntry.DeliveryName)
</th>
<th>
@Html.DisplayNameFor(model => model.MasterEntry.Type2)
</th>
<th>
@Html.DisplayNameFor(model => model.NetOrCross.NetOrCross1)
</th>
<th>
@Html.DisplayNameFor(model => model.PartyEntry.PartyName)
</th>
<th>
@Html.DisplayNameFor(model => model.DefaultUOMEntry.TypeofUOM)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ContractNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.SerialNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.ContractDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.BuyerBrokPCent)
</td>
<td>
@Html.DisplayFor(modelItem => item.SellerBrokPCent)
</td>
<td>
@Html.DisplayFor(modelItem => item.Quantity)
</td>
<td>
@Html.DisplayFor(modelItem => item.Rate)
</td>
<td>
@Html.DisplayFor(modelItem => item.RateInfo)
</td>
<td>
@Html.DisplayFor(modelItem => item.Payment)
</td>
<td>
@Html.DisplayFor(modelItem => item.TotalSellerCommission)
</td>
<td>
@Html.DisplayFor(modelItem => item.TotalCommission)
</td>
<td>
@Html.DisplayFor(modelItem => item.TotalCost)
</td>
<td>
@Html.DisplayFor(modelItem => item.TotalAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.UpdateDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.OpeningBalance)
</td>
<td>
@Html.DisplayFor(modelItem => item.Debit)
</td>
<td>
@Html.DisplayFor(modelItem => item.Credit)
</td>
<td>
@Html.DisplayFor(modelItem => item.ClosingBalance)
</td>
<td>
@Html.DisplayFor(modelItem => item.instruction)
</td>
<td>
@Html.DisplayFor(modelItem => item.Letterlines)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.DisplayFor(modelItem => item.CommodityEntry.CommodityName)
</td>
<td>
@Html.DisplayFor(modelItem => item.DeliveryEntry.DeliveryName)
</td>
<td>
@Html.DisplayFor(modelItem => item.MasterEntry.Type2)
</td>
<td>
@Html.DisplayFor(modelItem => item.NetOrCross.NetOrCross1)
</td>
<td>
@Html.DisplayFor(modelItem => item.PartyEntry.PartyName)
</td>
<td>
@Html.DisplayFor(modelItem => item.DefaultUOMEntry.TypeofUOM)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ConfirmationId }) |
@Html.ActionLink("Details", "Details", new { id = item.ConfirmationId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ConfirmationId })
</td>
</tr>
}
</table>*@
<style>
* {
border: 0;
box-sizing: content-box;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: top;
}
*[contenteditable] {
border-radius: 0.25em;
min-width: 1em;
outline: 0;
}
*[contenteditable] {
cursor: pointer;
}
*[contenteditable]:hover, *[contenteditable]:focus, td:hover *[contenteditable], td:focus *[contenteditable], img.hover {
background: #DEF;
box-shadow: 0 0 1em 0.5em #DEF;
}
span[contenteditable] {
display: inline-block;
}
h1 {
font: bold 100% sans-serif;
letter-spacing: 0.5em;
text-align: center;
text-transform: uppercase;
}
table {
font-size: 75%;
table-layout: fixed;
width: 100%;
}
table {
border-collapse: separate;
border-spacing: 2px;
border-color: black;
}
th, td {
border-width: 1px;
padding: 0.5em;
position: relative;
text-align: left;
}
th, td {
border-radius: 0.25em;
border-style: solid;
}
th {
background: #EEE;
border-color: #BBB;
}
td {
border-color: #DDD;
}
th {
font-size: 12px;
width: 65px;
}
body {
box-sizing: border-box;
height: 16in;
margin: 0 auto;
overflow: hidden;
padding: 0.8in;
width: 11.1in;
}
body {
background: #FFF;
border-color: black;
border-radius: 1px;
box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
}
header {
margin: 0 0 3em;
}
header:after {
clear: both;
content: "";
display: table;
}
header h1 {
background: white;
border-radius: 0.25em;
color: black;
margin: 0 0 0em;
padding: 0.6em 0;
font-size: 30px
}
table th {
background: white;
border-radius: 0.50em;
border-color: black;
color: black;
margin: 0 0 0em;
padding: 0.6em 0;
font-size: 25px;
width: 4.1in;
}
table td {
font-size: 25px;
border-color: black;
}
header address {
float: left;
font-size: 75%;
font-style: normal;
line-height: 1.25;
margin: 0 1em 1em 0;
text-align: center;
}
header address p {
margin: 0 0 0.25em;
font-size: 17px;
text-align: center;
}
header span, header img {
display: block;
float: right;
}
header span {
margin: 0 0 1em 1em;
max-height: 25%;
max-width: 60%;
position: relative;
}
header img {
max-height: 100%;
max-width: 100%;
}
header input {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
article, article address, table.meta, table.inventory {
margin: 0 0 3em;
}
article:after {
clear: both;
content: "";
display: table;
}
article h1 {
clip: rect(0 0 0 0);
position: absolute;
}
article address {
float: left;
font-size: 125%;
font-weight: bold;
}
table.meta, table.balance {
float: right;
width: 36%;
}
table.meta:after, table.balance:after {
clear: both;
content: "";
display: table;
}
table.meta th {
width: 40%;
}
table.meta td {
width: 60%;
}
table.inventory {
clear: both;
width: 100%;
}
table.inventory th {
font-weight: bold;
text-align: center;
}
table.inventory td:nth-child(1) {
width: 26%;
}
table.inventory td:nth-child(2) {
width: 38%;
}
table.inventory td:nth-child(3) {
text-align: right;
width: 12%;
}
table.inventory td:nth-child(4) {
text-align: right;
width: 12%;
}
table.inventory td:nth-child(5) {
text-align: right;
width: 12%;
}
table.balance th, table.balance td {
width: 50%;
}
table.balance td {
text-align: right;
}
aside h1 {
border: none;
border-width: 0 0 1px;
margin: 0 0 1em;
}
aside h1 {
border-color: #999;
border-bottom-style: solid;
}
.add, .cut {
border-width: 1px;
display: block;
font-size: .8rem;
padding: 0.25em 0.5em;
float: left;
text-align: center;
width: 0.6em;
}
.add, .cut {
background: #9AF;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
border-radius: 0.5em;
border-color: #0076A3;
color: #FFF;
cursor: pointer;
font-weight: bold;
text-shadow: 0 -1px 2px rgba(0,0,0,0.333);
}
.add {
margin: -2.5em 0 0;
}
.add:hover {
background: #00ADEE;
}
.cut {
opacity: 0;
position: absolute;
top: 0;
left: -1.5em;
}
.cut {
-webkit-transition: opacity 100ms ease-in;
}
tr:hover .cut {
opacity: 1;
}
html {
background: none;
padding: 0;
}
body {
box-shadow: none;
margin: 0;
}
span:empty {
display: none;
}
.add, .cut {
display: none;
}
</style>
<style>
div {
background-color: lightgrey;
width: 200px;
border: 2px solid black;
border-color: black;
padding: 20px;
margin: 20px;
}
</style>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('#datatable-tabletools').DataTable({
"footerCallback": function (row, data, start, end, display) {
var api = this.api(), data;
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
total = api
.column(7)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
pageTotal = api
.column(7, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
$(api.column(7).footer()).html(
'$' + pageTotal + ' ( $' + total + ' total)'
);
}
});
});
</script>
<script>
(function (document) {
var
head = document.head = document.getElementsByTagName('head')[0] || document.documentElement,
elements = 'article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output picture progress section summary time video x'.split(' '),
elementsLength = elements.length,
elementsIndex = 0,
element;
while (elementsIndex < elementsLength) {
element = document.createElement(elements[++elementsIndex]);
}
element.innerHTML = 'x<style>' +
'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
'audio[controls],canvas,video{display:inline-block}' +
'[hidden],audio{display:none}' +
'mark{background:#FF0;color:#000}' +
'</style>';
return head.insertBefore(element.lastChild, head.firstChild);
})(document);
(function (window, ElementPrototype, ArrayPrototype, polyfill) {
function NodeList() { [polyfill] }
NodeList.prototype.length = ArrayPrototype.length;
ElementPrototype.matchesSelector = ElementPrototype.matchesSelector ||
ElementPrototype.mozMatchesSelector ||
ElementPrototype.msMatchesSelector ||
ElementPrototype.oMatchesSelector ||
ElementPrototype.webkitMatchesSelector ||
function matchesSelector(selector) {
return ArrayPrototype.indexOf.call(this.parentNode.querySelectorAll(selector), this) > -1;
};
ElementPrototype.ancestorQuerySelectorAll = ElementPrototype.ancestorQuerySelectorAll ||
ElementPrototype.mozAncestorQuerySelectorAll ||
ElementPrototype.msAncestorQuerySelectorAll ||
ElementPrototype.oAncestorQuerySelectorAll ||
ElementPrototype.webkitAncestorQuerySelectorAll ||
function ancestorQuerySelectorAll(selector) {
for (var cite = this, newNodeList = new NodeList; cite = cite.parentElement;) {
if (cite.matchesSelector(selector)) ArrayPrototype.push.call(newNodeList, cite);
}
return newNodeList;
};
ElementPrototype.ancestorQuerySelector = ElementPrototype.ancestorQuerySelector ||
ElementPrototype.mozAncestorQuerySelector ||
ElementPrototype.msAncestorQuerySelector ||
ElementPrototype.oAncestorQuerySelector ||
ElementPrototype.webkitAncestorQuerySelector ||
function ancestorQuerySelector(selector) {
return this.ancestorQuerySelectorAll(selector)[0] || null;
};
})(this, Element.prototype, Array.prototype);
function generateTableRow() {
var emptyColumn = document.createElement('tr');
emptyColumn.innerHTML = '<td><a class="cut">-</a><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>' +
'<td><span data-prefix>$</span><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>' +
'<td><span data-prefix>$</span><span></span></td>';
return emptyColumn;
}
function parseFloatHTML(element) {
return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g, '')) || 0;
}
function parsePrice(number) {
return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
}
function updateNumber(e) {
var
activeElement = document.activeElement,
value = parseFloat(activeElement.innerHTML),
wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));
if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
e.preventDefault();
value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
value = Math.max(value, 0);
activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
}
updateInvoice();
}
function updateInvoice() {
var total = 0;
var cells, price, total, a, i;
for (var a = document.querySelectorAll('table.inventory tbody tr'), i = 0; a[i]; ++i) {
cells = a[i].querySelectorAll('span:last-child');
price = parseFloatHTML(cells[2]) * parseFloatHTML(cells[3]);
total += price;
cells[4].innerHTML = price;
}
cells = document.querySelectorAll('table.balance td:last-child span:last-child');
cells[0].innerHTML = total;
cells[2].innerHTML = document.querySelector('table.meta tr:last-child td:last-child span:last-child').innerHTML = parsePrice(total - parseFloatHTML(cells[1]));
var prefix = document.querySelector('#prefix').innerHTML;
for (a = document.querySelectorAll('[data-prefix]'), i = 0; a[i]; ++i) a[i].innerHTML = prefix;
for (a = document.querySelectorAll('span[data-prefix] + span'), i = 0; a[i]; ++i) if (document.activeElement != a[i]) a[i].innerHTML = parsePrice(parseFloatHTML(a[i]));
}
function onContentLoad() {
updateInvoice();
var
input = document.querySelector('input'),
image = document.querySelector('img');
function onClick(e) {
var element = e.target.querySelector('[contenteditable]'), row;
element && e.target != document.documentElement && e.target != document.body && element.focus();
if (e.target.matchesSelector('.add')) {
document.querySelector('table.inventory tbody').appendChild(generateTableRow());
}
else if (e.target.className == 'cut') {
row = e.target.ancestorQuerySelector('tr');
row.parentNode.removeChild(row);
}
updateInvoice();
}
function onEnterCancel(e) {
e.preventDefault();
image.classList.add('hover');
}
function onLeaveCancel(e) {
e.preventDefault();
image.classList.remove('hover');
}
function onFileInput(e) {
image.classList.remove('hover');
var
reader = new FileReader(),
files = e.dataTransfer ? e.dataTransfer.files : e.target.files,
i = 0;
reader.onload = onFileLoad;
while (files[i]) reader.readAsDataURL(files[i++]);
}
function onFileLoad(e) {
var data = e.target.result;
image.src = data;
}
if (window.addEventListener) {
document.addEventListener('click', onClick);
document.addEventListener('mousewheel', updateNumber);
document.addEventListener('keydown', updateNumber);
document.addEventListener('keydown', updateInvoice);
document.addEventListener('keyup', updateInvoice);
input.addEventListener('focus', onEnterCancel);
input.addEventListener('mouseover', onEnterCancel);
input.addEventListener('dragover', onEnterCancel);
input.addEventListener('dragenter', onEnterCancel);
input.addEventListener('blur', onLeaveCancel);
input.addEventListener('dragleave', onLeaveCancel);
input.addEventListener('mouseout', onLeaveCancel);
input.addEventListener('drop', onFileInput);
input.addEventListener('change', onFileInput);
}
}
window.addEventListener && document.addEventListener('DOMContentLoaded', onContentLoad);
</script>
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<h3 style="text-align:right; font-size:25px">Phones : Off. 25536993</h3>
<h3 style="text-align:right; font-size:25px"> Off. 080-41737585 </h3>
<h3 style="text-align:right; font-size:25px"> Off. 080-41737585 </h3>
<h3 style="text-align:right; font-size:25px">
Res. 25533002
</h3>
@*<h2 style="text-align:center">"OM"</h2>*@
<h1 style:font-size:65px>KANHAYALAL & CO</h1>
<h3 style="text-align:center; font-size:20px">No.224,225 Raheza Arcad Koramangala-Bangalore</h3>
<h3 style="text-align:center; font-size:20px">GST: 29ACLPA219L1ZC</h3>
<h3 style="text-align:center; font-size:20px">EMAIL:Kanhayalalandco@gmail.com</h3>
@*<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>*@
@*<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>*@
@*<span><img width="300" src="/../HospitalImages/shivashankara.png" alt="Profile image"></span>*@
</header>
@*<table class="meta">
<tr>
<h><span contenteditable>@Model</span></h>
</tr>
</table>*@
<h1 style="font-size:20px">Bank Reciept</h1>
<h1 style="text-align:left">Ref No. 000100</h1>
<h1 style="text-align:right">Date : 10/10/2019</h1>
<table>
<tr>
<th> Recieved With Thanks from :</th>
<td>@Model.PartyEntry.PartyName
</tr>
<tr>
<th> The Sum Of :</th>
<td>@Model.AmountInRupees</td>
</tr>
<tr>
<th> By</th>
<td>@Model.By1</td>
</tr>
<tr>
<th> Remarks :</th>
<td>@Model.Remarks</td>
</tr>
</table>
<div>
RS : @Model.Amount
</div>
<h2 style="text-align: right; font-size:30px"> Authorized Signatory </h2>
</body>
</html>
What I have tried:
This Pdf Print out its working on hosted file local it's Working fine