Angular 2在PDF / PNG上进行注释

Question

我有一个基于angular 7+和ASP.NET的Web应用程序。用于在浏览器上显示PDF文件。

例如，PDF文件具有如下模板：

用户将单击插入按钮，Web应用程序将从SQL Server数据库中获取数据，然后将数据追加到PDF。例如，数据为 3 。在浏览器上显示的PDF将如下所示：

这就像自动填写PDF表格一样。最终，可以在插入数据的情况下下载PDF文件。

我想知道是否有任何图书馆可以实现这一目标。因为我的Web应用程序基于Angular 7+，所以如果有一个角度库，对我来说会更好。

谢谢！

Answer 1

根据我的问题，我找不到合适的图书馆。但是我通过使用画布来做到这一点。这是一个丑陋的方法，但它解决了我的问题。

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