diff --git a/src/utils/functions/createPdf.ts b/src/utils/functions/createPdf.ts index 808cf68..14ff74c 100644 --- a/src/utils/functions/createPdf.ts +++ b/src/utils/functions/createPdf.ts @@ -1,18 +1,48 @@ import jsPDF from 'jspdf' +// @ts-ignore +import jspdfBarcode from 'jspdf-barcode' export default () => { + const OPTN = 'M25-000123' + const APPLICATION = '25-000123' + const DATE = 'October 8, 2025' + const NAME = 'BRUCE WAYNE' + const LOCATION = 'DAVAO CITY' + const TYPE = 'RESIDENTIAL - NEW INSTALLATION' + + const init = async () => { + console.log('yeah') + } + + init() + const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'letter', }) + const getTextWidth = (text: string, fontSize: number) => { + doc.setFontSize(fontSize) + return doc.getStringUnitWidth(text) * fontSize * 0.35 + } + + const pageWidth = doc.internal.pageSize.getWidth() + const lungsod = new Image() - lungsod.src = 'src/assets/images/lungsod2.png' + lungsod.src = 'src/assets/images/lungsod.png' const ocbo = new Image() ocbo.src = 'src/assets/images/ocbologo.png' + jspdfBarcode(doc, APPLICATION, { + fontSize: 32, + textColor: '#000000', + x: pageWidth - 35, + y: 40, + textOptions: { align: 'center' }, // optional text options + }) + // const lungsodItem = document.getElementById('lungsod') // const lungsodSrc = lungsodItem?.getAttribute('src') // const lungsodLink = document.createElement('a') @@ -23,55 +53,94 @@ export default () => { // const ocboLink = document.createElement('a') // ocboLink.href = ocboSrc ?? '' - const getTextWidth = (text: string, fontSize: number) => { - doc.setFontSize(fontSize) - return doc.getStringUnitWidth(text) * fontSize * 0.35 - } - - const pageWidth = doc.internal.pageSize.getWidth() - const republicText = 'Republic of the Philippines' - const republicTextWidth = getTextWidth(republicText, 10) + const republicTextWidth = getTextWidth(republicText, 9) const officeText = 'OFFICE OF THE CITY BUILDING OFFICIAL' - const officeTextWidth = getTextWidth(officeText, 11) + const officeTextWidth = getTextWidth(officeText, 10) const cityText = 'City of Davao' - const cityTextWidth = getTextWidth(cityText, 10) + const cityTextWidth = getTextWidth(cityText, 9) const republicTextX = (pageWidth - republicTextWidth) / 2 const officeTextX = (pageWidth - officeTextWidth) / 2 const cityTextX = (pageWidth - cityTextWidth) / 2 doc.setFont('helvetica', 'normal') - doc.setFontSize(10) + doc.setFontSize(9) doc.text(republicText, republicTextX, 14) doc.setFont('helvetica', 'bold') - doc.setFontSize(11) + doc.setFontSize(10) doc.text(officeText, officeTextX, 19) doc.setFont('helvetica', 'normal') - doc.setFontSize(10) + doc.setFontSize(9) doc.text(cityText, cityTextX, 24) - doc.addImage(lungsod, 'PNG', 12, 8, 20, 20, 'lungsod', 'NONE', 0) - doc.addImage(ocbo, 'PNG', pageWidth - 36, 8, 20, 20, 'ocbo', 'NONE', 0) - - // doc.setLineWidth(0.9) - // doc.line(10, 34, pageWidth - 10, 34) + doc.addImage(lungsod, 'PNG', 14, 8, 18, 18, 'lungsod', 'NONE', 0) + doc.addImage(ocbo, 'PNG', pageWidth - 34, 8, 18, 18, 'ocbo', 'NONE', 0) const opText = 'ORDER OF PAYMENT' - const opTextWidth = getTextWidth(opText, 10) + const opTextWidth = getTextWidth(opText, 8.75) const opTextX = (pageWidth - opTextWidth) / 2 - doc.setFont('helvetica', 'bold') - doc.setFontSize(10) - doc.text(opText, opTextX, 34) + doc.setFontSize(9) + doc.text(opText, opTextX, 36) const divisionText = 'ELECTRICAL PERMIT' - const divisionTextWidth = getTextWidth(divisionText, 9) + const divisionTextWidth = getTextWidth(divisionText, 7.25) const divisionTextX = (pageWidth - divisionTextWidth) / 2 + doc.setFont('helvetica', 'normal') + doc.setFontSize(8) + doc.text(divisionText, divisionTextX, 40) + + const optnText = 'OPTN:' + const optnTextX = 16 + doc.setFont('helvetica', 'bold') + doc.setFontSize(8) + doc.text(optnText, optnTextX, 48) + + const optnContentX = 25 + doc.setFontSize(8) + doc.text(OPTN, optnContentX, 48) + + const toText = `TO: The City Treasurer's Office` + const toTextX = 16 + doc.setFont('helvetica', 'normal') + doc.setFontSize(8) + doc.text(toText, toTextX, 52) + + doc.text('Please accept payment for fee specified herunder', 16, 56) + + doc.text('Application No. :', pageWidth - 60, 48) + + doc.setFont('helvetica', 'bold') + doc.text(APPLICATION, pageWidth - 38, 48) doc.setFont('helvetica', 'normal') - doc.setFontSize(9) - doc.text(divisionText, divisionTextX, 39) + doc.text('Approved Date :', pageWidth - 60, 52) + + doc.setFont('helvetica', 'bold') + doc.text(DATE, pageWidth - 38, 52) + + doc.setFont('helvetica', 'normal') + doc.text('Name of Applicant :', 23.4, 64) + + doc.setFont('helvetica', 'bold') + doc.text(NAME, 50, 64) + + doc.setFont('helvetica', 'normal') + doc.text('Location of Construction :', 16, 68) + + doc.setFont('helvetica', 'bold') + doc.text(LOCATION, 50, 68) + + doc.setFont('helvetica', 'normal') + doc.text('Type of Use :', 31.2, 72) + + doc.setFont('helvetica', 'bold') + doc.text(TYPE, 50, 72) + + doc.text('ACCOUNT DESCRIPTION', 16, 84) + doc.text('ACCOUNT CODE', getTextWidth('ACCOUNT DESCRIPTION', 8) + 40, 84) + doc.text('AMOUNT', getTextWidth('ACCOUNT DESCRIPTION', 8) + getTextWidth('ACCOUNT CODE', 8) + 65, 84) doc.save('Sample') }