Integration of PDF in UI for download and print PDF

Overview

The objective of PDF generation service is to bulk generate pdf as per requirement.

Pre-requisites

Before you proceed with the documentation, make sure the following pre-requisites are met -

• All required data and format file path is added in environment yml file

• pdf-service is up and running

Key Functionalities

• Provide functionality to download and print PDF’s

• Provide functionality to download and print bulk PDF’s

Deployment Details

1. Create data config and format config for a PDF according to product requirement.

2. Add data config and format config files in PDF configuration

3. Add the file path of data and format config in environment yml file

4. Deploy latest version of pdf-service in particular environment.

Configuration Details

For Configuration details please refer to the Customizing PDF Receipts & Certificates document in Reference Docs

Integration 

Integration Scope

The PDF configuration can be used by any module which need to show particular information in PDF format that can be print/downloaded by user.

Integration Benefits

• Functionality to generate PDFs in bulk.

• Avoid regeneration.

• Support QR codes and Images.

• Functionality to specify maximum number of records to be written in one PDF.

• Uploading generated PDF to filestore and return filestore id for easy access.

Steps to Integration

The following are the steps for integrating TL certificate in UI.

1. In footer.js file which is present in /frontend/web/rainmaker/dev-packages/egov-tradelicence-dev/src/ui-config/screens/specs/tradelicence/applyResource , Create two object (download and print object) in footerReview function.
   
   

   example:

   let tlCertificateDownloadObject = { label: { labelName: "TL Certificate", labelKey: "TL_CERTIFICATE" }, link: () => { const { Licenses } = state.screenConfiguration.preparedFinalObject; downloadCertificateForm(Licenses); }, leftIcon: "book" }; let tlCertificatePrintObject = { label: { labelName: "TL Certificate", labelKey: "TL_CERTIFICATE" }, link: () => { generateReceipt(state, dispatch, "certificate_print"); }, leftIcon: "book" };

   In tlCertificateDownloadObject give the proper label name and key for the pdf. In the link function get the object whose mapping is required for PDF, in this case, we want a license object. Call the function downloadCertificateForm (details about this function is described in the next step). Add icon details which we want to use in UI to represent that option. The same thing for tlcertificatePrintObject only difference is we have to call generateReceipt function. Again create the same two object with similar content in downloadPrintContainer function.
   
   

2. Mention the function name “downloadCertificateForm“ and “generateReceipt“ in import , because the functions is define in /frontend/web/rainmaker/dev-packages/egov-tradelicence-dev/src/ui-config/screens/specs/utils/index.js and /frontend/web/rainmaker/dev-packages/egov-tradelicence-dev/src/ui-config/screens/specs/utils/receiptPDF.js

3. In index.js define the function which is responsible for calling the Create API of PDF service to create respective PDF. In that function, you have to mention the tenant ID and proper key value which is the same as the key mentioned in the data and format config. Also mentioned the URL : /pdf-service/v1/_create and action as get and also call the function downloadReceiptFromFilestoreID which is responsible to call filestore service with filestoreid and return the URL for pdf.
   
   

   Example of function downloadCertificateForm

   export const downloadCertificateForm = (Licenses) => { const queryStr = [ { key: "key", value: "tlcertificate" }, { key: "tenantId", value: "pb" } ] const DOWNLOADRECEIPT = { GET: { URL: "/pdf-service/v1/_create", ACTION: "_get", }, }; try { httpRequest("post", DOWNLOADRECEIPT.GET.URL, DOWNLOADRECEIPT.GET.ACTION, queryStr, { Licenses }, { 'Accept': 'application/json' }, { responseType: 'arraybuffer' }) .then(res => { res.filestoreIds[0] if (res && res.filestoreIds && res.filestoreIds.length > 0) { res.filestoreIds.map(fileStoreId => { downloadReceiptFromFilestoreID(fileStoreId) }) } else { console.log("Error In Acknowledgement form Download"); } }); } catch (exception) { alert('Some Error Occured while downloading Acknowledgement form!'); } }

    

   example of function generateReceipt

   const generateReceipt = async (state, dispatch, type) => { // console.log("Transformed Data--",transformedData); pdfMakeCustom.vfs = pdfFonts.vfs; pdfMakeCustom.fonts = { Camby:{ normal: 'Cambay-Regular.ttf', bold: 'Cambay-Regular.ttf', italics: 'Cambay-Regular.ttf', bolditalics: 'Cambay-Regular.ttf' }, }; let data1 = _.get( state.screenConfiguration.preparedFinalObject, "applicationDataForReceipt", {} ); let data2 = _.get( state.screenConfiguration.preparedFinalObject, "receiptDataForReceipt", {} ); let data3 = _.get( state.screenConfiguration.preparedFinalObject, "mdmsDataForReceipt", {} ); let data4 = _.get( state.screenConfiguration.preparedFinalObject, "userDataForReceipt", {} ); let data5 = _.get( state.screenConfiguration.preparedFinalObject.Licenses[0].tradeLicenseDetail, "address", {} ); let ulbLogo = _.get( state.screenConfiguration.preparedFinalObject, "base64UlbLogo", "" ); if (_.isEmpty(data1)) { console.log("Error in application data"); return; } else if (_.isEmpty(data2)) { console.log("Error in receipt data"); return; } else if (_.isEmpty(data3)) { console.log("Error in mdms data"); return; } else if (_.isEmpty(data4)) { console.log("Error in auditor user data"); return; } else if (_.isEmpty(ulbLogo)) { console.log("Error in image data"); return; } let transformedData = { ...data1, ...data2, ...data3, ...data4, actualAddress:data5 }; switch (type) { case "certificate_download": let certificate_data = getCertificateData(transformedData, ulbLogo); certificate_data && // pdfMakeCustom.createPdf(certificate_data).download("tl_certificate.pdf"); pdfMakeCustom.createPdf(certificate_data).open(); break; case "certificate_print": certificate_data = getCertificateData(transformedData, ulbLogo); certificate_data && pdfMakeCustom.createPdf(certificate_data).print(); break; case "receipt_download": let receipt_data = getReceiptData(transformedData, ulbLogo); receipt_data && // pdfMakeCustom.createPdf(receipt_data).download("tl_receipt.pdf"); pdfMakeCustom.createPdf(receipt_data).open(); break; case "receipt_print": receipt_data = getReceiptData(transformedData, ulbLogo); receipt_data && pdfMakeCustom.createPdf(receipt_data).print(); break; default: break; } };

   
   Above are the following steps to integrate the certificate in the TL module, where a certificate is available to download when the payment is done for a particular application number.
   Steps to integrate other pdf may vary by little, but this above example for tlcertificate integration is just to give a basic idea.

Reference Docs

Doc Links

API List

(Note: All the API’s are in the same postman collection therefore same link is added in each row)