feat: handle foreignObject in svg to support html

CHANGELOG.md

@@ -44,6 +44,7 @@
 - Internally we were storing the `family` name field as a required property which was limiting what how you could capture the name of a person in the forms. Now we are storing it as an optional property which would make more flexible.
 - Remove the leftover features from the application config pages, such as certificates and informant notification. [#7156](https://github.com/opencrvs/opencrvs-core/issues/7156)
 - **PDF page size** The generated PDF used to be defaulted to A4 size. Now it respects the SVG dimensions if specified
+- Support html content wrapped in `foreignObject` used in svg template in certificate PDF output
 
 ## Bug fixes
 

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,34 @@ export function svgToPdfTemplate(svg: string, offlineResource: IOfflineData) {
     }
   }
 
-  pdfTemplate.definition.content = {
-    svg
+  const foreignObjects = svgElement.getElementsByTagName('foreignObject')
+  const absolutelyPositionedHTMLs: Content[] = []
+  for (const foreignObject of foreignObjects) {
+    const width = Number.parseInt(foreignObject.getAttribute('width')!)
+    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({
+      columns: [
+        {
+          width,
+          stack: pdfmakeContent
+        }
+      ],
+      absolutePosition: { x, y }
+    } as Content)
   }
+
+  pdfTemplate.definition.content = [
+    {
+      svg
+    },
+    ...absolutelyPositionedHTMLs
+  ]
+
   return pdfTemplate
 }