Background: WebSDK supports adding a signature via API and allows for customizing the appearance. Many signatures in real life are square-shaped, so when creating a signature, the rectangle is created with right-left = top-bottom. In this case, if you want to display both an image and text, the image can only be displayed on the left and the text on the right. The final appearance of the signature looks like this:
Problem: How can we set the text to display below the image?
Solution: By modifying the rectangle, when right-left < top-bottom, the text will be displayed below the image. After making this adjustment, the signature appearance will look like this:
Sample code：
var signInfo = {
filter: "Adobe.PPKLite",
subfilter: "adbe.pkcs7.sha1",
rect: {
left: 50,
bottom: 350,
right: 334,
top: 635
},
pageIndex: 0,
flag: PDFViewCtrl.PDF.constant.Signature_Ap_Flags.showBitmap|PDFViewCtrl.PDF.constant.Signature_Ap_Flags.showReason,
reason: "xxx of reason",
};var pdfViewer = await pdfui.getPDFViewer();
var pdfdoc = await pdfViewer.getCurrentPDFDoc();
var signResult = await pdfdoc.sign(signInfo,(signInfo, buffer) => {
return requestData(
"post",
"arraybuffer",
{ plain: new Blob([buffer]) }
);
});//open the signed PDFvar singedPDF = await pdfViewer.openPDFByFile(signResult);
