Hi Abdul,
Could you send me your current code, specifically how you have instantiated ‘Tool’, so I can see if there is an issue with the implementation?
The code snippet I sent you should work on its own. I have tested it in the sample React project using version 11.6.0.
Best Regards,
Mickaël.
Hi Mickael,
Would it be possible to schedule a live session to resolve this together?
Kindly let me know your availability or if there are any options that work for you.
Best regards,
Abdul Gaffar
Hi Abdul,
Are you still having the same issue using exportSignatures and importSignatures APIs?
Could you provide a code snippet showing how you implemented it?
If this doesn’t work for you, please create a ticket here:
Best Regards,
Mickaël.
Hi Mickael,
I still face the issue with import and exporting the signatures using APIs.
Kindly find the attached file for your reference, look at line number : 311.
Best regards,
Abdul Gaffar
PDFViewer.tsx (25.1 KB)
Hi Abdul,
Thank you for your reply.
First of all, you will have to upgrade to the latest v11.6.0 to implement this feature because a fix was implemented on importSignatures.
I realised when reading your code that your error is a TypeScript issue, when using the API getTool, it returns a generic Tool instance (Core.Tools.Tool), and TypeScript doesn’t know it’s actually a SignatureCreateTool, which does have importSignatures() and exportSignatures().
You can fix this like this:
type SignatureCreateTool =
typeof instance.Core.Tools.SignatureCreateTool.prototype;
const { documentViewer } = instance.Core;
const signatureTool = documentViewer.getTool(
instance.Core.Tools.ToolNames.SIGNATURE
) as SignatureCreateTool;
signatureTool.addEventListener("signatureSaved", async () => {
const exportedSignaturesData = await signatureTool.exportSignatures();
console.log("signatureData", exportedSignaturesData);
localStorage.setItem(
"signatures",
JSON.stringify(exportedSignaturesData)
);
});
documentViewer.addEventListener("documentLoaded", async () => {
const savedSignatures = localStorage.getItem("signatures");
if (savedSignatures) {
const signaturesData = JSON.parse(savedSignatures);
await signatureTool.importSignatures(signaturesData);
}
});
Let me know if you have any questions.
Best Regards,
Mickaël.
Hi Mickael,
Thank you for correcting the TypeScript error. Much appreciated.
We have managed to import the signatures back to the signature panel the moment the user creates the signature for the first time. But the signatures are not getting imported the next time when the users close and open the popup.
const initSignatureStorage = async () => {
if (!wvInstance) return;
const { Core } = wvInstance;
const { documentViewer, Tools } = Core;
// Wait for document to be loaded
if (!documentViewer.getDocument()) {
await new Promise<void>(resolve => {
const onLoaded = () => {
documentViewer.removeEventListener("documentLoaded", onLoaded);
resolve();
};
documentViewer.addEventListener("documentLoaded", onLoaded);
});
}
const signatureTool = documentViewer.getTool(Tools.ToolNames.SIGNATURE) as SignatureCreateTool;
if (!signatureTool || !("importSignatures" in signatureTool)) {
console.warn("Signature tool or import/export APIs not available.");
return;
}
// 🔄 Restore saved signatures
const savedSignatures = localStorage.getItem("signatures");
if (savedSignatures) {
try {
await signatureTool.importSignatures(JSON.parse(savedSignatures));
console.warn("✅ Imported saved signatures");
} catch (err) {
console.error("❌ Failed to import signatures:", err);
}
}
// 💾 Save signatures on creation
signatureTool.addEventListener("signatureSaved", async () => {
try {
const data = await (signatureTool as any).exportSignatures();
localStorage.setItem("signatures", JSON.stringify(data));
console.warn("💾 Signatures saved");
} catch (err) {
console.error("❌ Failed to export signatures:", err);
}
});
};
initSignatureStorage();
Could you also let me know the right place to insert this snippet to align with the lifecycle of the widget.
Best regards,
Abdul Gaffar
Hi Abdul,
I’m not exactly sure what you mean by you were able to import the signature back, but not when the user closes the popup?
On the lifecycle, waiting for the document to be loaded seems appropriate for me.
Best Regards,
Mickaël.
Hi Mickael,
Let me clarify the situation:
When a user adds a digital signature and places it within the document, the signature is immediately reflected in the Signature Panel. They are able to add multiple signatures as needed, and the document is then saved successfully.
However, upon reopening the saved document, while the signatures remain visible within the document itself, they no longer appear in the Signature Panel.
Please let me know if you need any further clarification.
Best regards,
Abdul Gaffar
Hi Abdul,
Thank you for your reply and explanation. I now perfectly see what you are trying to achieve.
The code sample I sent you was saving the signatures in the localStorage, for the user to keep is signature betweens documents.
What you are trying to do here is to save the signatures per document, and when the customer opens that document, to show the signatures of the document.
The logic would be the same, but instead of saving and getting the signature from the localStorage, what you need is to store the result of the exportSignatures.
You can store the data the way you see fit, database, JSON file, etc..
When you open the file, you will have to fetch the signatures that are linked to this file on the documentLoaded event and use the importSignatures API.
Let me know if you have any questions.
Best Regards,
Mickaël.
Hi Mickael,
Thank you for the clarification.
To ensure correct implementation, could you please confirm whether the Export and Import signature code snippets should be placed inside the following block:
useEffect(() => {
// Mount WebViewer only once
}, []);
Looking forward to your confirmation.
Best regards,
Best regards,
Abdul Gaffar
Hi Abdul,
Yes, it should be in the then function where you have access to the instance.
Best Regards,
Mickaël.
Hi Mickael,
Thank you for your valuable support with the signature export and import functionality.
We’re now able to export and import signatures successfully without any issues. To help us take this further, could you please share the documentation related to this implementation—preferably in React or within a Mendix context?
We truly appreciate your continued assistance.
Best regards,
Abdul Gaffar
Hi Abdul,
I’m afraid we don’t have much documentation or a guide on these API’s as they are pretty straightforward, but here is the Dev Docs:
Let me know if you have any questions.
Best Regards,
Mickaël.
