Hopding
commented
6 years ago Hello @ssleptsov. This is certainly possible, as pdf-lib provides low level access to pdf objects. However, there is not currently a nice high level API for manipulating annotations or acroform objects, so you'll have to put up with some verbose boilerplate for now :smile:
Here's how to do it:
const pdfBytes = /* A Uint8Array containing the PDF you wish to modify */
const pdfDoc = PDFDocumentFactory.load(pdfBytes);
const [FontHelvetica] = pdfDoc.embedStandardFont('Helvetica');
// Define the signature dictionary (Detailed in Table 252 of PDF specification)
// Note that the dict below isn't actually valid. I just made up its `ByteRange`
// and `Contents` entries. It's just an example.
const signatureDict = PDFDictionary.from({
Type: PDFName.from('Sig'),
Filter: PDFName.from('Adobe.PPKLite'),
SubFilter: PDFName.from('adbe.pkcs7.detached'),
ByteRange: PDFArray.fromArray([
PDFNumber.fromNumber(0),
PDFNumber.fromNumber(0),
PDFNumber.fromNumber(0),
PDFNumber.fromNumber(0),
], pdfDoc.index),
Contents: PDFHexString.fromString('00000000000'),
Reason: PDFString.fromString('We need your signature for reasons...'),
// M: PDFString.fromString('D:YYYYMMDDHHmmSSOHH'mm')
// See section "7.9.4 Dates" of the PDF specification for details on the format of date strings
}, pdfDoc.index);
// Define a content stream that defines how the signature field should appear
// on the PDF.
//
// Note: This isn't necessary if you define the signature widget's "Rect" entry
// as [0, 0, 0, 0] like in the snippet you provided. But I've implemented it
// just in case you (or others) might find it useful.
const sigAppearanceStream = PDFContentStream.of(
PDFDictionary.from({
Type: PDFName.from('XObject'),
Subtype: PDFName.from('Form'),
BBox: PDFArray.fromArray([
PDFNumber.fromNumber(0),
PDFNumber.fromNumber(0),
PDFNumber.fromNumber(200),
PDFNumber.fromNumber(50),
], pdfDoc.index),
Resources: PDFDictionary.from({
Font: PDFDictionary.from({
Helvetica: FontHelvetica
}, pdfDoc.index)
}, pdfDoc.index),
}, pdfDoc.index),
drawRectangle({
x: 0,
y: 0,
width: 200,
height: 50,
colorRgb: [0.95, 0.95, 0.95],
borderWidth: 3,
borderColorRgb: [0, 0, 0],
}),
drawText('Sign Here', {
x: 10,
y: 15,
font: 'Helvetica',
size: 30,
colorRgb: [0.5, 0.5, 0.5],
}),
drawRectangle({
x: 4,
y: 4,
width: 192,
height: 2,
colorRgb: [0.5, 0.5, 0.5],
}),
);
const sigAppearanceStreamRef = pdfDoc.register(sigAppearanceStream);
// Define the signature widget annotation
const widgetDict = PDFDictionary.from({
Type: PDFName.from('Annot'),
Subtype: PDFName.from('Widget'),
FT: PDFName.from('Sig'),
Rect: PDFArray.fromArray([
PDFNumber.fromNumber(50),
PDFNumber.fromNumber(50),
PDFNumber.fromNumber(300),
PDFNumber.fromNumber(100),
], pdfDoc.index),
// Uncomment this if you've created a valid signatureDict
// V: signatureDict,
T: PDFString.fromString('Signature1'),
F: PDFNumber.fromNumber(4),
P: (pdfDoc.catalog.Pages.get('Kids') as PDFArray).get(0),
AP: PDFDictionary.from({
N: sigAppearanceStreamRef,
}, pdfDoc.index),
}, pdfDoc.index);
const widgetDictRef = pdfDoc.register(widgetDict);
// Add our signature widget to the first page
const pages = pdfDoc.getPages();
pages[0].set(
'Annots',
PDFArray.fromArray([widgetDictRef], pdfDoc.index),
);
// Create an AcroForm object containing our signature widget
const formDict = PDFDictionary.from({
SigFlags: PDFNumber.fromNumber(3),
Fields: PDFArray.fromArray([widgetDictRef], pdfDoc.index),
}, pdfDoc.index);
pdfDoc.catalog.set('AcroForm', formDict);
const modifiedPdfBytes = PDFDocumentWriter.saveToBytes(pdfDoc);Here's a sample PDF that I modified using the script above (notice the "Sign Here" field at the bottom of the first page): pdf-with-signature-field-unsigned.pdf.
And here's the original pdf.
Please let me know if this is what you're looking for, or if you need any additional help with pdf-lib!
ssleptsov
pspeter3
john-attrium-204
therpobinski
vbuch
SnigBhaumik
brasycad
vemundeldegard
Hey, is it possible to get/set Annot or Widget for existing pdf file? I'm trying to replace this pdfkit code with your library
Thanks!