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