mirror of
https://github.com/dyiop/astute.git
synced 2025-04-05 21:10:16 -04:00
Invoice Printing!!
This commit is contained in:
Akash Shah
parent
6157211d6c
commit
e0b3b43c06
|
|
@ -9,16 +9,21 @@
|
|||
/*-moz-box-sizing: border-box;*/
|
||||
/*}*/
|
||||
.page {
|
||||
width: 21cm;
|
||||
min-height: 29.7cm;
|
||||
width: 215.9mm;
|
||||
height: 279.4mm;
|
||||
padding: 2cm;
|
||||
margin: 1cm auto;
|
||||
border: 1px #D3D3D3 solid;
|
||||
border-radius: 5px;
|
||||
border-radius: 2px;
|
||||
background: white;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
@media print {
|
||||
* { display:none; }
|
||||
.page * { display:block; }
|
||||
}
|
||||
/*.subpage {*/
|
||||
/*padding: 1cm;*/
|
||||
/*border: 5px red solid;*/
|
||||
|
|
|
|||
|
|
@ -1,57 +1,65 @@
|
|||
<app-nav-bar></app-nav-bar>
|
||||
<div class="page" #doc>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<img src="AstuteLogo.gif" align="left" alt="Astute Engineering" height="75">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p class="h1 text-right align-bottom">INVOICE</p>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="100%"><img src="assets/img/AstuteLogo.gif" align="left" alt="Astute Engineering" height="75"></td>
|
||||
<td width="100%"><p class="h1 text-right align-bottom">INVOICE</p></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--<div class="row">-->
|
||||
<!--<div class="col-6">-->
|
||||
<!--<img src="AstuteLogo.gif" align="left" alt="Astute Engineering" height="75">-->
|
||||
<!--</div>-->
|
||||
<!--<div class="col-6">-->
|
||||
<!--<p class="h1 text-right align-bottom">INVOICE</p>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<p>To,</p>
|
||||
<p>{{name}}</p>
|
||||
<p>{{email}}</p>
|
||||
<p>{{address}}</p>
|
||||
</div>
|
||||
<div class="col-5 text-right">
|
||||
<p>Purchase Order No.:</p>
|
||||
<p>Contract No.:</p>
|
||||
<p>Invoice No.:</p>
|
||||
<p>Invoice Date:</p>
|
||||
</div>
|
||||
<div class="col text-left">
|
||||
<p>{{poNum}}</p>
|
||||
<p>{{coNum}}</p>
|
||||
<p>{{inNum}}</p>
|
||||
<p>{{inDate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="30%">
|
||||
<p>To,</p>
|
||||
<p>{{name}}</p>
|
||||
<p>{{email}}</p>
|
||||
<p>{{address}}</p>
|
||||
</td>
|
||||
<td class="text-right" width="40%">
|
||||
<p>Purchase Order No.:</p>
|
||||
<p>Contract No.:</p>
|
||||
<p>Invoice No.:</p>
|
||||
<p>Invoice Date:</p>
|
||||
</td>
|
||||
<td class="text-left" width="100%">
|
||||
<p>{{poNum}}</p>
|
||||
<p>{{coNum}}</p>
|
||||
<p>{{inNum}}</p>
|
||||
<p>{{inDate}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<table class="table table-sm table-bordered table-light">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th scope="col" style="text-align: center;">No.</th>
|
||||
<th scope="col">Description</th>
|
||||
<th scope="col" style="text-align: center;">Hourly Rate</th>
|
||||
<th scope="col" style="text-align: center;">Hours Expended</th>
|
||||
<th scope="col" style="text-align: center;">Invoice Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let inDet of inDetails">
|
||||
<th scope="row" style="text-align: center;">{{inDet.lineItemNum}}</th>
|
||||
<td>{{inDet.desc}}</td>
|
||||
<td style="text-align: right;">${{inDet.anount}}.00</td>
|
||||
<td style="text-align: center;">-</td>
|
||||
<td style="text-align: right;">${{inDet.anount}}.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table table-sm table-bordered table-light">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th scope="col" style="text-align: center;">No.</th>
|
||||
<th scope="col" style="text-align: center;">Description</th>
|
||||
<th scope="col" style="text-align: center;">Fee</th>
|
||||
<th scope="col" style="text-align: center;">Quantity</th>
|
||||
<th scope="col" style="text-align: center;">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let inDet of inDetails">
|
||||
<th scope="row" style="text-align: center;">{{inDet.lineItemNum}}</th>
|
||||
<td>{{inDet.desc}}</td>
|
||||
<td style="text-align: right;">${{inDet.fee}}{{(inDet.feeTypeId == 2) ? ' /hr' : ''}}</td>
|
||||
<td style="text-align: right;">{{inDet.qty}}</td>
|
||||
<td style="text-align: right;">${{inDet.qty * inDet.fee}}.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<table>
|
||||
|
|
@ -80,12 +88,6 @@
|
|||
<td style="width: 305px; text-align: right; height: 18px;"> </td>
|
||||
<td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;"> </td>
|
||||
</tr>
|
||||
<tr style="height: 18px;">
|
||||
<td style="width: 251.5px; text-align: right; height: 18px;">Amount This Invoice</td>
|
||||
<td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{inAmt}}</td>
|
||||
<td style="width: 305px; text-align: right; height: 18px;"> </td>
|
||||
<td style="background-color: lightgray; border-color: black; width: 153px; height: 18px;"> </td>
|
||||
</tr>
|
||||
<tr style="height: 18px;">
|
||||
<td style="width: 251.5px; text-align: right; height: 18px;">Balance to be Billed</td>
|
||||
<td style="background-color: lightgray; border-color: black; width: 137.5px; height: 18px;">{{balToBeBill}}</td>
|
||||
|
|
@ -111,12 +113,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid skip">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="text-center">
|
||||
<button class="btn btn-lg btn-outline-primary"(click)="moreTestJsPDF()">Download PDF</button>
|
||||
<button class="btn btn-lg btn-outline-primary" (click)="downloadPDF()">Download Image PDF</button>
|
||||
<button class="btn btn-lg btn-outline-primary" (click)="testjsPDF()">Build PDF</button>
|
||||
<button class="btn btn-lg btn-outline-primary" (click)="printGrid(null)">Print Grid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {AstuteClientService} from '../services/astute-client-service';
|
||||
import {formatCurrency} from '@angular/common';
|
||||
|
||||
declare var html2pdf: any;
|
||||
declare var html2canvas: any;
|
||||
declare var jsPDF: any;
|
||||
declare var $: any
|
||||
declare var $: any;
|
||||
|
||||
@Component({
|
||||
selector: 'app-invoice-gen',
|
||||
|
|
@ -17,9 +18,9 @@ export class InvoiceGenComponent implements OnInit {
|
|||
gridX = []; // these are the layout grid STARTING
|
||||
gridY = []; // from the 1 inch border (x: 25; y:23)
|
||||
|
||||
name;
|
||||
email;
|
||||
address;
|
||||
name: string;
|
||||
email: string;
|
||||
address: string;
|
||||
|
||||
poNum;
|
||||
coNum;
|
||||
|
|
@ -48,19 +49,17 @@ export class InvoiceGenComponent implements OnInit {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
let x = 25;
|
||||
let y = 23;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
let x = 28.5;
|
||||
let y = 25;
|
||||
for (let i = 0; i < 17; i++) { //
|
||||
this.gridX[i] = x;
|
||||
x += 10;
|
||||
}
|
||||
for (let j = 0; j < 26; j++) {
|
||||
for (let j = 0; j < 24; j++) {
|
||||
this.gridY[j] = y;
|
||||
y += 10;
|
||||
}
|
||||
console.log('Layout Grid X: ' + this.gridX);
|
||||
console.log('Layout Grid Y: ' + this.gridY);
|
||||
this.astuteClientService.getInvoiceGen('VDO-02_0108_3').then((data) => {
|
||||
this.astuteClientService.getInvoiceGen('MDO-01_DRAFT_720').then((data) => {
|
||||
this.name = data.customer.customerName;
|
||||
this.email = data.customer.email;
|
||||
this.address = data.customer.add1 + ' ' + data.customer.add2 + ' ' +
|
||||
|
|
@ -76,15 +75,10 @@ export class InvoiceGenComponent implements OnInit {
|
|||
|
||||
this.ogCoAmt = data.po.contractAmt;
|
||||
this.netChanges = 0;
|
||||
this.totCoAmt = 0;
|
||||
this.prevBill = data.previouslyPaidAmt;
|
||||
this.inAmt = data.invoice.billAmt;
|
||||
this.totCoAmt = data.po.contractAmt;
|
||||
this.prevBill = data.po.previouslyBilledAmount;
|
||||
this.balToBeBill = data.balanceToBeBilled;
|
||||
this.subTotal = this.inAmt;
|
||||
this.milage = 0;
|
||||
this.otherExp = 0;
|
||||
this.outOf = 0;
|
||||
this.finTot = this.inAmt;
|
||||
this.finTot = data.invoice.billAmt;
|
||||
|
||||
this.notes = data.invoice.specialNotes;
|
||||
this.cert = data.invoice.certification;
|
||||
|
|
@ -94,32 +88,34 @@ export class InvoiceGenComponent implements OnInit {
|
|||
downloadPDF() {
|
||||
// new html2pdf(document.getElementById('doc'));
|
||||
|
||||
const A4_width = 210;//425; // pixels
|
||||
const A4_height = 297;//550; // pixels
|
||||
const ratio = 2;
|
||||
// const A4_width = 210;// pixels
|
||||
// const A4_height = 297;// pixels
|
||||
const letter_width = 215.9;
|
||||
const letter_height = 279.4;
|
||||
const ratio = 5;
|
||||
// //
|
||||
const oldCanvas = document.createElement('canvas');
|
||||
oldCanvas.width = A4_width;
|
||||
oldCanvas.height = A4_height;
|
||||
oldCanvas.width = letter_width;
|
||||
oldCanvas.height = letter_height;
|
||||
const oldContext = oldCanvas.getContext('2d');
|
||||
const oldImg = new Image();
|
||||
oldImg.src = oldCanvas.toDataURL();
|
||||
oldContext.drawImage(oldImg, 0, 0, A4_width, A4_height);
|
||||
oldContext.drawImage(oldImg, 0, 0, letter_width, letter_height);
|
||||
|
||||
const newImg = new Image();
|
||||
newImg.onload = () => {
|
||||
html2canvas(this.invoiceHTML.nativeElement).then((newCanvas) => {
|
||||
console.log(this.invoiceHTML.nativeElement);
|
||||
// newCanvas.width = A4_width / 50;
|
||||
// newCanvas.height = A4_height / 50;
|
||||
// newCanvas.width = letter_width / 5;
|
||||
// newCanvas.height = letter_height / 5;
|
||||
const newContext = newCanvas.getContext('2d');
|
||||
// Scale and draw the source image to the canvas
|
||||
newContext.drawImage(newImg, 0, 0, A4_width * ratio, A4_height * ratio);
|
||||
newContext.drawImage(newImg, 0, 0, letter_width * ratio, letter_height * ratio);
|
||||
newImg.src = newCanvas.toDataURL();
|
||||
const pdfDoc = new jsPDF({
|
||||
unit: 'mm'
|
||||
});
|
||||
pdfDoc.addImage(newImg, 'png', 0, 0, 210, 297); // imageData, format, x, y, w, h
|
||||
pdfDoc.addImage(newImg, 'pdf', 0, 0, letter_width, letter_height); // imageData, format, x, y, w, h
|
||||
//pdfDoc.addHTML(this.invoiceHTML.nativeElement);
|
||||
pdfDoc.save(this.inNum + '.pdf'); // save file
|
||||
newImg.onload = undefined; // kill the func
|
||||
|
|
@ -139,60 +135,275 @@ export class InvoiceGenComponent implements OnInit {
|
|||
}
|
||||
|
||||
testjsPDF() {
|
||||
const doc = jsPDF();
|
||||
doc.text('INVOICE', this.gridX[13], this.gridY[0]);
|
||||
doc.text('ASTUTE', this.gridX[0], this.gridY[0]);
|
||||
|
||||
// No. Column (header and rows)
|
||||
doc.rect(this.gridX[0], this.gridY[5], 10, 10);
|
||||
for (let i = 6; i < 15; i += 2) {
|
||||
doc.rect(this.gridX[0], this.gridY[i], 10, 20);
|
||||
const doc = jsPDF('p', 'mm', 'letter');
|
||||
console.log(doc.getFontList());
|
||||
// this.printGrid(doc);
|
||||
this.printHeader(doc);
|
||||
let len = this.inDetails.length;
|
||||
if (len <= 6) {
|
||||
this.printTable(doc, 7, 13, this.inDetails);
|
||||
} else if (len > 6 && len <= 28) {
|
||||
this.printTable(doc, 7, 22, this.inDetails.slice(0, 15));
|
||||
doc.addPage('letter', 'p');
|
||||
this.printTable(doc, 0, 13, this.inDetails.slice(15, 28));
|
||||
} else {
|
||||
this.printTable(doc, 7, 22, this.inDetails.slice(0, 15));
|
||||
len -= 15;
|
||||
let i = 0;
|
||||
while (len > 13) {
|
||||
doc.addPage('letter', 'p');
|
||||
this.printTable(doc, 0, 22, this.inDetails.slice(15 + (22 * i), 37 + (22 * i)));
|
||||
i++;
|
||||
}
|
||||
doc.addPage('letter', 'p');
|
||||
this.printTable(doc, 0, 13, this.inDetails.slice(37 + (22 * (i - 1))));
|
||||
}
|
||||
|
||||
// Description Column (header and rows)
|
||||
doc.rect(this.gridX[1], this.gridY[5], 70, 10);
|
||||
for (let i = 6; i < 15; i += 2) {
|
||||
doc.rect(this.gridX[1], this.gridY[i], 70, 20);
|
||||
}
|
||||
|
||||
// Hourly Rate Column (header and rows)
|
||||
doc.rect(this.gridX[8], this.gridY[5], 30, 10);
|
||||
for (let i = 6; i < 15; i += 2) {
|
||||
doc.rect(this.gridX[8], this.gridY[i], 30, 20);
|
||||
}
|
||||
|
||||
// Hours Column (header and rows)
|
||||
doc.rect(this.gridX[11], this.gridY[5], 20, 10);
|
||||
for (let i = 6; i < 15; i += 2) {
|
||||
doc.rect(this.gridX[11], this.gridY[i], 20, 20);
|
||||
}
|
||||
|
||||
// Amount Column (header and rows)
|
||||
doc.rect(this.gridX[13], this.gridY[5], 30, 10);
|
||||
for (let i = 6; i < 15; i += 2) {
|
||||
doc.rect(this.gridX[13], this.gridY[i], 30, 20);
|
||||
}
|
||||
doc.addPage()
|
||||
doc.addPage()
|
||||
doc.text('I am on page 3', 10, 10)
|
||||
doc.setPage(1)
|
||||
this.printFooter(doc);
|
||||
doc.save('a4.pdf');
|
||||
}
|
||||
|
||||
printHeader (doc) {
|
||||
if (!doc) {
|
||||
doc = jsPDF('p', 'mm', 'letter');
|
||||
}
|
||||
///////////////////// Header //////////
|
||||
// Logo and INVOICE
|
||||
doc.setFontSize(35);
|
||||
doc.text('INVOICE', this.gridX[10] + 5, this.gridY[2] - 5);
|
||||
doc.addImage('assets/img/AstuteLogo.png', 'png', this.gridX[0], this.gridY[0], 50, 22.04);
|
||||
|
||||
// To, customer
|
||||
doc.setFontSize(12);
|
||||
doc.text('To,', this.gridX[0], this.gridY[3]);
|
||||
const nameSplit = doc.splitTextToSize(this.name, 65);
|
||||
nameSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[0] + 5, this.gridY[3] + (5 * (i + 1)));
|
||||
});
|
||||
doc.setTextColor(66, 144, 255);
|
||||
const emailSplit = doc.splitTextToSize(this.email, 65);
|
||||
emailSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[0] + 5, this.gridY[4] + (5 * (i + 1)));
|
||||
});
|
||||
doc.setTextColor(0);
|
||||
const addressSplit = doc.splitTextToSize(this.address, 65);
|
||||
addressSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[0] + 5, this.gridY[5] + (5 * (i + 1)));
|
||||
});
|
||||
|
||||
// Invoice Information
|
||||
doc.text('Purchase Order #:', this.gridX[11], this.gridY[3], {'align': 'right'});
|
||||
const poNumSplit = doc.splitTextToSize(' ' + this.poNum, 50);
|
||||
poNumSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[11], this.gridY[3] + (5 * i));
|
||||
});
|
||||
|
||||
doc.text('Contract #:', this.gridX[11], this.gridY[4], {'align': 'right'});
|
||||
const coNumSplit = doc.splitTextToSize(' ' + this.coNum, 50);
|
||||
coNumSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[11], this.gridY[4] + (5 * i));
|
||||
});
|
||||
|
||||
doc.text('Invoice #:', this.gridX[11], this.gridY[5], {'align': 'right'});
|
||||
const inNumSplit = doc.splitTextToSize(' ' + this.inNum, 50);
|
||||
inNumSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[11], this.gridY[5] + (5 * i));
|
||||
});
|
||||
|
||||
doc.text('Invoice Date:', this.gridX[11], this.gridY[6], {'align': 'right'});
|
||||
const inDateSplit = doc.splitTextToSize(' ' + this.inDate, 50);
|
||||
inDateSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[11], this.gridY[6] + (5 * i));
|
||||
});
|
||||
///////////////////////////////////////
|
||||
if (!doc) {
|
||||
doc.autoPrint({variant: 'non-conform'});
|
||||
doc.save('grid.pdf');
|
||||
}
|
||||
}
|
||||
|
||||
printTable (doc, start, end, details) {
|
||||
if (!doc) {
|
||||
doc = jsPDF('p', 'mm', 'letter');
|
||||
}
|
||||
///////////////////// Table ///////////
|
||||
doc.setLineWidth(.25);
|
||||
doc.setDrawColor(170);
|
||||
|
||||
// Number Column (header and rows)
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[0], this.gridY[start], 10, 10, 'FD');
|
||||
doc.text('#', this.gridX[0] + 5, this.gridY[start + 1] - 3.5, {'align': 'center'});
|
||||
for (let i = start + 1; i <= end; i++) {
|
||||
doc.rect(this.gridX[0], this.gridY[i], 10, 10);
|
||||
}
|
||||
|
||||
// Description Column (header and rows)
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[1], this.gridY[start], 70, 10, 'FD');
|
||||
doc.text('Description', this.gridX[4] + 5, this.gridY[start + 1] - 3.5, {'align': 'center'});
|
||||
for (let i = start + 1; i <= end; i++) {
|
||||
doc.rect(this.gridX[1], this.gridY[i], 70, 10);
|
||||
}
|
||||
|
||||
// Fee Column (header and rows)
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[8], this.gridY[start], 30, 10, 'FD');
|
||||
doc.text('Fee', this.gridX[9] + 5, this.gridY[start + 1] - 3.5, {'align': 'center'});
|
||||
for (let i = start + 1; i <= end; i++) {
|
||||
doc.rect(this.gridX[8], this.gridY[i], 30, 10);
|
||||
}
|
||||
|
||||
// Quantity Column (header and rows)
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[11], this.gridY[start], 20, 10, 'FD');
|
||||
doc.text('Qty.', this.gridX[12], this.gridY[start + 1] - 3.5, {'align': 'center'});
|
||||
for (let i = start + 1; i <= end; i++) {
|
||||
doc.rect(this.gridX[11], this.gridY[i], 20, 10);
|
||||
}
|
||||
|
||||
// Amount Column (header and rows)
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[13], this.gridY[start], 30, 10, 'FD');
|
||||
doc.text('Amount', this.gridX[14] + 5, this.gridY[start + 1] - 3.5, {'align': 'center'});
|
||||
for (let i = start + 1; i <= end; i++) {
|
||||
doc.rect(this.gridX[13], this.gridY[i], 30, 10);
|
||||
}
|
||||
|
||||
// Filling Data
|
||||
doc.setFontSize(12);
|
||||
details.forEach((inDet, i) => {
|
||||
doc.text(inDet.lineItemNum.toString(), this.gridX[0] + 5, this.gridY[start + 2 + i] - 3.5, {'align': 'center'});
|
||||
|
||||
doc.setFontSize(11);
|
||||
const descSplit = doc.splitTextToSize(inDet.desc, 66);
|
||||
descSplit.forEach((text, j) => {
|
||||
doc.text(text, this.gridX[1] + 2, this.gridY[start + 1 + i] + (4 * (j + 1)));
|
||||
});
|
||||
|
||||
doc.setFontSize(12);
|
||||
const fee = formatCurrency(inDet.fee, 'en-US', '$', 'USD').split('.')[0] + ((inDet.feeTypeId === 2) ? '/hr' : '');
|
||||
doc.text(fee, this.gridX[11] - 3.5, this.gridY[start + 2 + i] - 3.5, {'align': 'right'});
|
||||
|
||||
doc.text(inDet.qty.toString(), this.gridX[13] - 3.5, this.gridY[start + 2 + i] - 3.5, {'align': 'right'});
|
||||
|
||||
const amt = formatCurrency(inDet.fee * inDet.qty, 'en-US', '$', 'USD');
|
||||
doc.text(amt, this.gridX[16] - 3.5, this.gridY[start + 2 + i] - 3.5, {'align': 'right'});
|
||||
});
|
||||
///////////////////////////////////////
|
||||
if (!doc) {
|
||||
doc.autoPrint({variant: 'non-conform'});
|
||||
doc.save('table.pdf');
|
||||
}
|
||||
}
|
||||
|
||||
printFooter (doc) {
|
||||
if (!doc) {
|
||||
doc = jsPDF('p', 'mm', 'letter');
|
||||
}
|
||||
///////////////////// Footer //////////
|
||||
doc.setFontSize(12);
|
||||
|
||||
// Invoice Bill Info Section
|
||||
doc.setLineWidth(.25);
|
||||
doc.setDrawColor(170);
|
||||
doc.rect(this.gridX[0], this.gridY[15], 160, 50);
|
||||
doc.text('Original Contract Amt.', this.gridX[5] - 3.5, this.gridY[16] - 3.5, {align: 'right'});
|
||||
doc.text('Net Changes by CO\'s', this.gridX[5] - 3.5, this.gridY[17] - 3.5, {align: 'right'});
|
||||
doc.text('Total Contract Amt.', this.gridX[5] - 3.5, this.gridY[18] - 3.5, {align: 'right'});
|
||||
doc.text('Previously Billed', this.gridX[5] - 3.5, this.gridY[19] - 3.5, {align: 'right'});
|
||||
doc.text('Balance to be Billed', this.gridX[5] - 3.5, this.gridY[20] - 3.5, {align: 'right'});
|
||||
for (let i = 15; i <= 19; i++) {
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[5], this.gridY[i], 30, 10, 'FD');
|
||||
}
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Total Due this Invoice', this.gridX[13] - 3.5, this.gridY[16] - 3.5, {align: 'right'});
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setFillColor(225);
|
||||
doc.rect(this.gridX[13], this.gridY[15], 30, 10, 'FD');
|
||||
|
||||
// Fill Data
|
||||
const ogCoAmt = formatCurrency(this.ogCoAmt, 'en-US', '$', 'USD');
|
||||
doc.text(ogCoAmt, this.gridX[8] - 3.5, this.gridY[16] - 3.5, {align: 'right'});
|
||||
|
||||
const netChanges = formatCurrency(this.netChanges, 'en-US', '$', 'USD');
|
||||
doc.text(netChanges, this.gridX[8] - 3.5, this.gridY[17] - 3.5, {align: 'right'});
|
||||
|
||||
const totCoAmt = formatCurrency(this.totCoAmt, 'en-US', '$', 'USD');
|
||||
doc.text(totCoAmt, this.gridX[8] - 3.5, this.gridY[18] - 3.5, {align: 'right'});
|
||||
|
||||
const prevBill = formatCurrency(this.prevBill, 'en-US', '$', 'USD');
|
||||
doc.text(prevBill, this.gridX[8] - 3.5, this.gridY[19] - 3.5, {align: 'right'});
|
||||
|
||||
const toBeBilled = formatCurrency(this.totCoAmt - this.prevBill - this.finTot, 'en-US', '$', 'USD');
|
||||
doc.text(toBeBilled, this.gridX[8] - 3.5, this.gridY[20] - 3.5, {align: 'right'});
|
||||
|
||||
const finTot = formatCurrency(this.finTot, 'en-US', '$', 'USD');
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(finTot, this.gridX[16] - 3.5, this.gridY[16] - 3.5, {align: 'right'});
|
||||
doc.setFont('helvetica', 'normal');
|
||||
|
||||
// Notes and Certification
|
||||
doc.text('Notes:', this.gridX[0], this.gridY[20] + 5);
|
||||
const noteSplit = doc.splitTextToSize(this.notes, 145);
|
||||
noteSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[1] + 5, this.gridY[20] + (5 * (i + 1)));
|
||||
});
|
||||
const certSplit = doc.splitTextToSize(this.cert, 160);
|
||||
certSplit.forEach((text, i) => {
|
||||
doc.text(text, this.gridX[0], this.gridY[22] + (5 * i));
|
||||
});
|
||||
doc.line(this.gridX[11], this.gridY[23], this.gridX[16], this.gridY[23]);
|
||||
///////////////////////////////////////
|
||||
if (!doc) {
|
||||
doc.autoPrint({variant: 'non-conform'});
|
||||
doc.save('footer.pdf');
|
||||
}
|
||||
}
|
||||
|
||||
printGrid (doc) {
|
||||
if (!doc) {
|
||||
doc = jsPDF('p', 'mm', 'letter');
|
||||
} else {
|
||||
doc.setDrawColor(225);
|
||||
}
|
||||
this.gridX.forEach((x) => {
|
||||
doc.line(x, this.gridY[0], x, this.gridY[this.gridY.length - 1]);
|
||||
// doc.text(x.toString(), x, this.gridY[0]);
|
||||
});
|
||||
this.gridY.forEach((y) => {
|
||||
doc.line(this.gridX[0], y, this.gridX[this.gridX.length - 1], y);
|
||||
// doc.text(y.toString(), this.gridX[0], y);
|
||||
});
|
||||
doc.setDrawColor(0);
|
||||
if (!doc) {
|
||||
doc.autoPrint({variant: 'non-conform'});
|
||||
doc.save('grid.pdf');
|
||||
}
|
||||
}
|
||||
|
||||
moreTestJsPDF() {
|
||||
const doc = new jsPDF();
|
||||
// const specialElementHandlers = {
|
||||
// '#editor': function (element, renderer) {
|
||||
// return true;
|
||||
// }
|
||||
// };
|
||||
// doc.fromHTML(this.invoiceHTML.nativeElement, 15, 15, {
|
||||
// 'width': 170,
|
||||
// 'elementHandlers': specialElementHandlers
|
||||
// });
|
||||
console.log (this.invoiceHTML);
|
||||
doc.addHTML(this.invoiceHTML.nativeElement);
|
||||
doc.save('sample-file.pdf');
|
||||
const doc = jsPDF('p', 'mm', 'letter');
|
||||
const specialElementHandlers = {
|
||||
'#editor': function (element, renderer) {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
// let content = invoiceHTML.nativeElement;
|
||||
doc.fromHTML(this.invoiceHTML.nativeElement.innerHTML, 15, 15, {
|
||||
'width': 1900,
|
||||
'elementHandlers': specialElementHandlers
|
||||
}, () => {
|
||||
doc.save('sample-file.pdf');
|
||||
});
|
||||
// console.log (this.invoiceHTML);
|
||||
// doc.addHTML(this.invoiceHTML.nativeElement);
|
||||
|
||||
}
|
||||
|
||||
jQueryTest() {
|
||||
$('doc').printElement();
|
||||
}
|
||||
|
||||
// html2pdf((<HTMLInputElement>document.getElementById('doc')));
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user