CODEWITHSUNDEEP
javascriptjqueryasp.netangular
wadefanyaoxia
wadefanyaoxia

Reputation: 607

Angular 2 annotating on PDF/PNG

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:

enter image description here

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:

enter image description here

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!

Upvotes: 1

Views: 428

Answers (1)

wadefanyaoxia
wadefanyaoxia

Reputation: 607

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);
    }
}

Upvotes: 1

Related Questions