I'm currently utilizing ng2-pdf-viewer within a modal component to view a PDF file. The PDF is generated from a blob using the URL.createObjectURL method.
After initialization, I have signed the PDF. However, when I update the src variable with a new value, the changes are not reflected until I manually click on the PDF.
@Component({
selector: 'app-trip-detail-pdf',
template: `
<div class="form-group">
<div class="row">
<div class="col-12">
<pdf-viewer #pdfViewer
[src]="documentData"
[render-text]="true"
[original-size]="false"
[autoresize]="false"
[show-all]="true"
[fit-to-page]="false"
[zoom]="1"
[zoom-scale]="'page-width'"
style="width: 100%;"
[style.height.vh]="loadingPlanDetail?.IsSigned? 90: (bs.xs$|async)?70:(bs.sm$|async)&&(bs.handSetLandscape$|async)?40:(bs.tablet$|async)?60:72"
></pdf-viewer>
</div>
<div class="pt-1 col-12" >
<app-signature (signed)="signedPdf($event)" *ngIf="!loadingPlanDetail?.IsSigned"></app-signature>
</div>
</div>
</div>
`,
styles: [
]
})
export class DeliverDetailPdfComponent implements OnInit {
@ViewChild('pdfViewer', { static: true }) pdfViewer: PdfViewerComponent;
@Input() documentData: any;
@Input() loadingPlanDetail: LoadingPlanDetailModel;
@Input() deliverHeader: DeliverHeaderModel;
@Output() td: EventEmitter<any> = new EventEmitter();
pdfArray: any;
pdfDoc: PDFDocument;
constructor(public bs: BreakpointService, private store: Store) { }
ngOnInit() {
this.drawDriverSign()
}
async drawDriverSign() {
console.log("drawDriverSign")
this.pdfArray = await this.loadingPlanDetail.Pdf.arrayBuffer();
this.pdfDoc = await PDFDocument.load(this.pdfArray)
const signDriverImage = await this.pdfDoc.embedPng(this.deliverHeader.Sign);
const signImageSize = signDriverImage.size();//.scale(0.25)
//get first page dimension
const pages = this.pdfDoc.getPages()
const firstPage = pages[0]
const { width, height } = firstPage.getSize()
const page = this.pdfDoc.addPage([width, height]);
//begin - driver signature
page.drawRectangle({
x: 20,
y: 700,
width: 350,
height: 100,
borderColor: rgb(0, 0, 1),
rotate: degrees(0),
xSkew: degrees(0),
ySkew: degrees(0),
})
page.drawText('Driver Signature', {
x: 25, y: 802, size: 10, color: rgb(0, 0, 0)
})
page.drawImage(signDriverImage, {
x: 25, //page.getWidth() / 2 - signImageSize.width / 2,
y: 680, //page.getHeight() / 2 - signImageSize.height / 2,
width: signImageSize.width,
height: signImageSize.height,
});
//end - driver signature
const pdfSave = await this.pdfDoc.save()
const pdfBlob = new Blob([pdfSave], { type: 'application/pdf' });
this.documentData = URL.createObjectURL(pdfBlob);
}
}