Angular 2在PDF / PNG上注释

Question

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

例如，PDF文件有一个模板如下：

用户将点击一个插入按钮，Web应用程序将从SQL服务器数据库获取数据，然后数据将附加到PDF。 例如，数据是3 。 浏览器上显示的PDF如下所示：

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

我想知道是否有任何库可以实现这一点。 因为我的网络应用程序基于Angular 7+，如果有一个角度库，它对我来说会更好。

提前致谢！

Answer 1

根据我的问题，我找不到合适的图书馆。 但我是用画布做的。 这是一种丑陋的方式，但它解决了我的问题。

我的观点-cci-pdf-panel.Component.html：

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

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