diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json index 6b62c1401..9b7331ed1 100644 --- a/apps/OpenSign/package-lock.json +++ b/apps/OpenSign/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@formkit/auto-animate": "^0.8.2", "@lottiefiles/dotlottie-react": "^0.8.6", + "@pdf-lib/fontkit": "^1.1.1", "@radix-ui/themes": "^3.1.1", "@react-pdf/renderer": "^3.4.4", "@reduxjs/toolkit": "^2.2.7", @@ -3741,6 +3742,14 @@ "node": ">= 8" } }, + "node_modules/@pdf-lib/fontkit": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@pdf-lib/fontkit/-/fontkit-1.1.1.tgz", + "integrity": "sha512-KjMd7grNapIWS/Dm0gvfHEilSyAmeLvrEGVcqLGi0VYebuqqzTbgF29efCx7tvx+IEbG3zQciRSWl3GkUSvjZg==", + "dependencies": { + "pako": "^1.0.6" + } + }, "node_modules/@pdf-lib/standard-fonts": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz", diff --git a/apps/OpenSign/package.json b/apps/OpenSign/package.json index 7378dc386..9aaa3dbe3 100644 --- a/apps/OpenSign/package.json +++ b/apps/OpenSign/package.json @@ -5,6 +5,7 @@ "dependencies": { "@formkit/auto-animate": "^0.8.2", "@lottiefiles/dotlottie-react": "^0.8.6", + "@pdf-lib/fontkit": "^1.1.1", "@radix-ui/themes": "^3.1.1", "@react-pdf/renderer": "^3.4.4", "@reduxjs/toolkit": "^2.2.7", diff --git a/apps/OpenSign/public/font/times.ttf b/apps/OpenSign/public/font/times.ttf new file mode 100644 index 000000000..51261a005 Binary files /dev/null and b/apps/OpenSign/public/font/times.ttf differ diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index d12927fe5..d1a400c30 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -7,6 +7,7 @@ import { appInfo } from "./appinfo"; import { saveAs } from "file-saver"; import printModule from "print-js"; import { validplan } from "../json/plansArr"; +import fontkit from "@pdf-lib/fontkit"; export const fontsizeArr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28]; export const fontColorArr = ["red", "black", "blue", "yellow"]; @@ -15,6 +16,12 @@ export const isTabAndMobile = window.innerWidth < 1023; export const textInputWidget = "text input"; export const textWidget = "text"; export const radioButtonWidget = "radio button"; +export const fileasbytes = async (filepath) => { + const response = await fetch(filepath); // Adjust the path accordingly + const arrayBuffer = await response.arrayBuffer(); + return new Uint8Array(arrayBuffer); +}; + export const openInNewTab = (url, target) => { if (target) { window.open(url, target, "noopener,noreferrer"); @@ -1025,8 +1032,11 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => { //function for embed document id export const embedDocId = async (pdfDoc, documentId, allPages) => { + // `fontBytes` is used to embed custom font in pdf + const fontBytes = await fileasbytes("/font/times.ttf"); + pdfDoc.registerFontkit(fontkit); + const font = await pdfDoc.embedFont(fontBytes, { subset: true }); for (let i = 0; i < allPages; i++) { - const font = await pdfDoc.embedFont("Helvetica"); const fontSize = 10; const textContent = documentId && `OpenSign™ DocumentId: ${documentId} `; const pages = pdfDoc.getPages(); @@ -1240,6 +1250,10 @@ export const multiSignEmbed = async ( pdfOriginalWH, containerWH ) => { + // `fontBytes` is used to embed custom font in pdf + const fontBytes = await fileasbytes("/font/times.ttf"); + pdfDoc.registerFontkit(fontkit); + const font = await pdfDoc.embedFont(fontBytes, { subset: true }); for (let item of widgets) { const containerScale = getContainerScale( pdfOriginalWH, @@ -1343,7 +1357,6 @@ export const multiSignEmbed = async ( "email" ].includes(position.type); if (position.type === "checkbox") { - const font = await pdfDoc.embedFont("Helvetica"); let checkboxOptionGapFromTop, isCheck; let y = yPos(position); const optionsFontSize = 13; @@ -1404,7 +1417,6 @@ export const multiSignEmbed = async ( }); } } else if (widgetTypeExist) { - const font = await pdfDoc.embedFont("Helvetica"); const fontSize = calculateFontSize( position, containerScale, @@ -1523,7 +1535,6 @@ export const multiSignEmbed = async ( dropdown.addToPage(page, dropdownOption); dropdown.enableReadOnly(); } else if (position.type === radioButtonWidget) { - const font = await pdfDoc.embedFont("Helvetica"); const radioRandomId = "radio" + randomId(); const radioGroup = form.createRadioGroup(radioRandomId); let radioOptionGapFromTop;