Angular 2 annotating on PDF/PNG

Question

I have a web application based on angular 7+ and ASP.NET. It is used to display PDF files on browser.

For example, the PDF file has a template as below:

The user will hit a insert button and the web app will get data from SQL server database, then the data will be appending to the PDF. For example the data is 3 . The displayed PDF on browser will like below:

It is like filling a PDF form automatically. Eventually, the PDF file can be downloaded with the data inserted.

I would like to know if there is any library can achieve this. Because my web app is based on Angular 7+, if there is an angular library, it will be better for me.

Thanks in advance!

Answer 1

I could not find a proper library according to my question. But I did it by using canvas. It is a ugly way but it solved my problem.

My view-cci-pdf-panel.Component.html:

<div #canvasStack class="canvasStack" style="display:inline-block;position:relative;">
            <canvas id="canvas-block" #canvasBlock></canvas>
</div>

view-cci-pdf-panel.components:

export class ViewCciPdfPanelComponent implements OnInit {
@ViewChild('canvasBlock') canvasBlock: ElementRef;
@ViewChild('canvasStack') canvasStack: ElementRef;
public zoomSize: number = 1;
private canvasContext: CanvasRenderingContext2D;

....
....
....

//Load the cover page and populate the information on cover page
public loadCoverPage() {
    let img = this.renderer.createElement('img');
    img.src = '/images/FaxCoverPage.png';
    this.canvasContext = this.canvasBlock.nativeElement.getContext('2d');
    this.canvasBlock.nativeElement.width = 675 * this.zoomSize;
    this.canvasBlock.nativeElement.height = 872 * this.zoomSize;
    this.canvasBlock.nativeElement.style.border = '1px solid';

    img.onload = () => {
        this.canvasContext.scale(this.zoomSize, this.zoomSize);
        this.canvasContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, 650, 850);
        this.canvasContext.font = '17px Arial';

        ...
        ...
        ...

        //Page
        let pageNum = this.coverPageData.pages + '';
        this.canvasContext.fillText(pageNum, 304, 510);
    }
}