I used ng2-pdf-viewer npm to display pdf. In that pdf I can edit input tag values. When I download that pdf file I get an editable pdf but values are not updated.
And when I convert html to pdf and then download pdf that time I get updated values but pdf is not editable.
Can anyone help me out with this?
On file select I set the value in the src tag
function onFileSelected(event: any) {
let $img: any = document.querySelector('#file');
if (typeof FileReader !== 'undefined') {
let reader = new FileReader();
reader.onload = (e: any) => {
this.src = e.target.result;
};
reader.readAsArrayBuffer($img.files[0]);
}
}
after load complete of file I update my input tag value
function afterLoadComplete(pdf: any) {
debugger
this.pdfs=pdf;
console.log('after-load-complete');
for (let i = 1; i <= pdf.numPages; i++) {
// track the current page
pdf.getPage(i).then((p: any) => {
debugger
return p.getAnnotations();
})
.then((ann: any) => {
debugger
const annotations = (<any>ann) as any[];
annotations.filter(a => a.subtype === 'Widget')
.forEach(a => {
if (a.id == "36R")
a.fieldValue = "manish";
debugger
// this._createInput(a);
});
});
}
}
When I download pdf I got editable pdf but values are not updated
function downloads() {
this.pdfs.getData().then((u8: any) => {
debugger
let blob = new Blob([u8.buffer], {
type: 'application/pdf'
});
let url = URL.createObjectURL(blob);
this.openLink(url);
setTimeout(function () {
window.URL.revokeObjectURL(url);
}, 5000);
});
}
private openLink(url: string) {
debugger
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = 'Certificate.pdf';
a.click();
}