Hey Tilal,
Thanks for reaching out to me, i really appreciate it. I was able to resolve the issue by correcting the storage and paths. But there’s an underlying problem that I am facing right now. I am uploading both the Seal image and certificate to the storage. But i am unable to view the seal on the digitally signed document. Please guide as to how I can add a seal to the document using the node sdk so that it’s visible on the Digitally signed document.
While you want to add visible digital signature to PDF in Node.js using GroupDocs.Signature REST API, please set the visible property of SignDigitalOptions to true as its default value is false. It will help you to show the signature image in the output document.
How to eSign PDF Document in Node.js
- Free signup with groupdocs.cloud to get the credentials
- Upload PDF file, signature image and certificate to Cloud Storage
- Install GroupDocs.Signature Cloud SDK for Node.js module from NPM
- Create a Node.js script file and add a reference to GroupDocs.Signature Cloud SDK for Node.js
- Initiate GroupDocs.Singature Cloud API
- Initiate FileInfo object for input PDF file SignDigitalOptions Object for signature options and pass to SignSettings object
- Create CreateSignaturesRequest instance and pass it to createSingatures API method for signing the PDF document
Sample Code to Electronically Sign PDF Document in Node.js Without Adobe
// Get your application information from https://dashboard.groupdocs.cloud
signature_cloud = require("groupdocs-signature-cloud");
const digitalSign = async () => {
// Get Client Id and Client Secret from https://dashboard.groupdocs.cloud
const clientId = "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx";
const clientSecret= "xxxxxxxxxxxxxxxxxxxxxxxxxxx";
// Initiate Signature API
signApi = signature_cloud.SignApi.fromKeys(clientId, clientSecret);
// Set input file path
let fileInfo = new signature_cloud.FileInfo();
fileInfo.filePath = "02_pages.pdf";
// Set Signature Options
let opts = new signature_cloud.SignDigitalOptions();
opts.signatureType = signature_cloud.OptionsBase.SignatureTypeEnum.Digital;
opts.imageFilePath = "signature.jpg";
opts.certificateFilePath = "temp.pfx";
opts.password = "xxxxxxxx";
opts.visible = true;
opts.left = 167;
opts.top = 791;
opts.width = 180;
opts.height = 60;
let settings = new signature_cloud.SignSettings();
settings.fileInfo = fileInfo;
settings.options = [opts];
// Set SaveOption of signed document
settings.saveOptions = new signature_cloud.SaveOptions();
settings.saveOptions.outputFilePath = "signedDigital_sample2.pdf";
// Sign the document
let request = new signature_cloud.CreateSignaturesRequest(settings);
let response = await signApi.createSignatures(request);
}
digitalSign()
.then(() => {
console.log("PDF document signed successfully");
})
.catch((err) => {
console.log("Error occurred while signing the PDF document:", err);
})
Hey Tilal thanks for the response. I was able to display seal successfully, But there’s an underlying issue. The seal image uploaded is distorted and placed on the top right corner of the page by default. Is there a way i can place the seal image dynamically according to my own choice. I have multiple different documents to be digitally signed, and each of them has different spots for placing the seal. Please help me in this regard.
Please use the Left and Top parameter to control the signature image position. Top left position is 0,0. For the distorted image issue, you may use the Width and Height parameter as per your requirement. Hopefully, it will resolve the issue.
Hey Tilal, Thanks for the timely response, but i guess i didn’t clearly communicate the issue here. I’ll be using group docs API for a client focused application. For the time being i can provide the left right or top positions in my code. But after product launch i cannot expect my clientele to provide left right or top position during the document signing as they are not much of techy people. Is there any other way to continue with this?
I am afraid currently there are no other options available at the moment. As per my understanding, it is more convenient for an API user(developer) to control the position with these parameters. You can get the desired coordinates in your application and map them with the page coordinates to insert the signature. Anyhow, if you have some other suggestions then please share them with us.
Hey Tilal,
I wanted to ask that the Left and Top coordinates that are required for placing the seal image, are they calculated from the top left corner of the seal image or the center of the seal image. Because I’m coming up with a solution on my own to get the coordinates from the PDF documents by using Konva api. But i need to match the x,y coordinates i receive from konva to group docs api.
Also i would suggest that the seal image positioning should be more user centric so that one can easily place it wherever they desire.
The signature coordinates are calculated from the left top of the seal image. For example, seal image placement with Left = 0, Top = 0 will be as following.
In the GroupDocs.Signature Cloud API we provide left and top parameters for placing the signature. Please share your suggestion, if you have some other idea. We will evaluate it.
For Node JS how can i select the Page number where i need to place the seal image.
Actually the biggest hurdle while using the group docs API is i have to prepare a custom front end PDF for getting top and left coordinates for the placement of Seal image. Like how is the user supposed to know the top and left coordinates of a PDF. I hope this issue can be mitigated soon.
Kindly use page property of SignDigitalOptions to set the page number for signature (image).
Please note GroupDocs.Singature Cloud API is a back end UI agnostic API. The user has to implement his own interface or integrate with custom application.
Yes i do understand that, that’s why i mentioned that its quite troublesome to get the coordinates right.
1 Like
Now I’m facing a problem here that, I’m sending the top and left coordinates to the group docs API but its placing the SEAL image way below the location i want it to be placed . Attaching a sample to create a better understanding of the issue.
SnipForGroupDocs.png (56.2 KB)
Please share your sample code and input document along with the seal image. We will look into it and will guide you accordingly.
global.signApi = signature_cloud.SignApi.fromKeys(clientId, clientSecret);
let fileInfo = new signature_cloud.FileInfo();
fileInfo.filePath = "******/***********/******dummy.pdf";
let opts = new signature_cloud.SignDigitalOptions();
opts.signatureType = signature_cloud.OptionsBase.SignatureTypeEnum.Digital;
opts.imageFilePath = "******/***********/******Seal.png";
opts.certificateFilePath = "******/***********/******Cert.pfx";
opts.password = "******************";
opts.visible = true;
opts.width = 180
opts.height = 60
opts.left= 167
opts.top=791
let settings = new signature_cloud.SignSettings();
settings.fileInfo = fileInfo;
settings.options = [opts];
settings.saveOptions = new signature_cloud.SaveOptions();
settings.saveOptions.outputFilePath = "Test/signedDigital_sample2.pdf";
let request = new signature_cloud.CreateSignaturesRequest(settings);
let response = await signApi.createSignatures(request);
Here is the sample code snippet that i am using to place the Seal on the desired document but its placemnet is way out of the place where i want it to be. For some privacy reasons i wont be able to share the Seal image with you but i can share its dimensions.
(Seal Image Height: 263, Width: 752)
Input document: dummy.pdf (13.0 KB)
Basically what happens is that the Coordinates i extract from the front end have the maximum width of around 800px, while the group docs width maxes out at 450px. I guess this is where the mapping is creating the problems for us.
Thanks for sharing the sample code. I tried the scenario with shared coordinates and unable to notice the issue. You may try to replicate with some dummy image and share it with us for investigation.
