Angular 2, аннотирование на PDF / PNG

Question

У меня есть веб-приложение на базе Angular 7+ и ASP.NET. Он используется для отображения файлов PDF в браузере.

Например, файл PDF имеет следующий шаблон:

Пользователь нажмет кнопку вставки, и веб-приложение получит данные из базы данных SQL-сервера, после чего данные будут добавлены в PDF-файл. Например, данные 3 . Отображаемый PDF в браузере будет выглядеть так:

Это похоже на автоматическое заполнение PDF-формы. В конце концов, файл PDF может быть загружен со вставленными данными.

Я хотел бы знать, может ли какая-либо библиотека достичь этого. Поскольку мое веб-приложение основано на Angular 7+, если есть угловая библиотека, для меня это будет лучше.

Заранее спасибо!

Answer 1

Я не смог найти подходящую библиотеку по моему вопросу. Но я сделал это с помощью холста. Это ужасный путь, но он решил мою проблему.

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