feat: handle foreignObject in svg to support html

packages/client/package.json

@@ -40,6 +40,7 @@
     "@sentry/tracing": "^7.12.1",
     "@types/bcryptjs": "^2.4.2",
     "@types/history": "^4.6.2",
+    "@types/html-to-pdfmake": "^2.4.4",
     "@types/nock": "^10.0.3",
     "@types/pdfmake": "^0.2.0",
     "@types/react-redux": "^7.1.5",
@@ -66,6 +67,7 @@
     "graphql-tools": "^4.0.7",
     "handlebars": "^4.7.6",
     "history": "^4.7.2",
+    "html-to-pdfmake": "^2.5.13",
     "iframe-resizer-react": "^1.1.0",
     "jsdom-worker": "^0.3.0",
     "jwt-decode": "^2.2.0",

packages/client/src/views/PrintCertificate/PDFUtils.ts

@@ -28,6 +28,8 @@ import isValid from 'date-fns/isValid'
 import format from 'date-fns/format'
 import { getHandlebarHelpers } from '@client/forms/handlebarHelpers'
 import { FontFamilyTypes } from '@client/utils/referenceApi'
+import htmlToPdfmake from 'html-to-pdfmake'
+import { Content } from 'pdfmake/interfaces'
 
 type TemplateDataType = string | MessageDescriptor | Array<string>
 function isMessageDescriptor(
@@ -224,8 +226,19 @@ src: url("${url}") format("truetype");
   return serializer.serializeToString(svg)
 }
 export function svgToPdfTemplate(svg: string, offlineResource: IOfflineData) {
+  const initialDefaultFont = offlineResource.templates.fonts
+    ? Object.keys(offlineResource.templates.fonts)[0]
+    : null
   const pdfTemplate: IPDFTemplate = {
     ...certificateBaseTemplate,
+    definition: {
+      ...certificateBaseTemplate.definition,
+      defaultStyle: {
+        font:
+          initialDefaultFont ||
+          certificateBaseTemplate.definition.defaultStyle.font
+      }
+    },
     fonts: {
       ...certificateBaseTemplate.fonts,
       ...offlineResource.templates.fonts
@@ -253,9 +266,30 @@ export function svgToPdfTemplate(svg: string, offlineResource: IOfflineData) {
     }
   }
 
-  pdfTemplate.definition.content = {
-    svg
+  const foreignObjects = svgElement.getElementsByTagName('foreignObject')
+  const absolutelyPositionedHTMLs: Content[] = []
+  if (foreignObjects.length) {
+    for (const foreignObject of foreignObjects) {
+      const x = Number.parseInt(foreignObject.getAttribute('x')!)
+      const y = Number.parseInt(foreignObject.getAttribute('y')!)
+      const htmlContent = foreignObject.innerHTML
+      const pdfmakeContent = htmlToPdfmake(htmlContent, {
+        ignoreStyles: ['font-family']
+      })
+      absolutelyPositionedHTMLs.push({
+        stack: pdfmakeContent,
+        absolutePosition: { x, y }
+      } as Content)
+    }
   }
+
+  pdfTemplate.definition.content = [
+    {
+      svg
+    },
+    ...absolutelyPositionedHTMLs
+  ]
+
   return pdfTemplate
 }
 

packages/client/src/views/PrintCertificate/usePrintableCertificate.ts

@@ -8,10 +8,10 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import { WORKQUEUE_TABS } from '@client/components/interface/Navigation'
 import {
   IPrintableDeclaration,
   SUBMISSION_STATUS,
   modifyDeclaration,
   writeDeclaration
 } from '@client/declarations'
@@ -19,9 +19,9 @@
 import {
   CorrectionSection,
   IFormSectionData,
   SubmissionAction
 } from '@client/forms'
 import { goToCertificateCorrection, goToHomeTab } from '@client/navigation'
 import { getOfflineData } from '@client/offline/selectors'
 import { getScope, getUserDetails } from '@client/profile/profileSelectors'
 import { IStoreState } from '@client/store'
@@ -146,28 +146,28 @@
     }
     const draft = cloneDeep(declaration)
 
-    draft.submissionStatus = SUBMISSION_STATUS.READY_TO_CERTIFY
-    draft.action = isPrintInAdvance
-      ? SubmissionAction.CERTIFY_DECLARATION
-      : SubmissionAction.CERTIFY_AND_ISSUE_DECLARATION
+    // draft.submissionStatus = SUBMISSION_STATUS.READY_TO_CERTIFY
+    // draft.action = isPrintInAdvance
+    //   ? SubmissionAction.CERTIFY_DECLARATION
+    //   : SubmissionAction.CERTIFY_AND_ISSUE_DECLARATION
 
     const registeredDate = getRegisteredDate(draft.data)
     const certificate = draft.data.registration.certificates[0]
     const eventDate = getEventDate(draft.data, draft.event)
-    if (!isPrintInAdvance) {
-      const paymentAmount = calculatePrice(
-        draft.event,
-        eventDate,
-        registeredDate,
-        offlineData
-      )
-      certificate.payments = {
-        type: 'MANUAL' as const,
-        amount: Number(paymentAmount),
-        outcome: 'COMPLETED' as const,
-        date: new Date().toISOString()
-      }
-    }
+    // if (!isPrintInAdvance) {
+    //   const paymentAmount = calculatePrice(
+    //     draft.event,
+    //     eventDate,
+    //     registeredDate,
+    //     offlineData
+    //   )
+    //   certificate.payments = {
+    //     type: 'MANUAL' as const,
+    //     amount: Number(paymentAmount),
+    //     outcome: 'COMPLETED' as const,
+    //     date: new Date().toISOString()
+    //   }
+    // }
 
     const svg = await compileSvg(
       offlineData.templates.certificates[draft.event].definition,
@@ -186,12 +186,12 @@
     }
 
     const pdfTemplate = svgToPdfTemplate(svg, offlineData)
-
+    console.log(pdfTemplate)
     printPDF(pdfTemplate, draft.id)
 
-    dispatch(modifyDeclaration(draft))
-    dispatch(writeDeclaration(draft))
-    dispatch(goToHomeTab(WORKQUEUE_TABS.readyToPrint))
+    // dispatch(modifyDeclaration(draft))
+    // dispatch(writeDeclaration(draft))
+    // dispatch(goToHomeTab(WORKQUEUE_TABS.readyToPrint))
   }
 
   const handleEdit = () => {