[英]Angular 2 annotating on PDF/PNG
I have a web application based on angular 7+ and ASP.NET. 我有一个基于角度7+和ASP.NET的Web应用程序。 It is used to display PDF files on browser.
它用于在浏览器上显示PDF文件。
For example, the PDF file has a template as below: 例如,PDF文件有一个模板如下:
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. 用户将点击一个插入按钮,Web应用程序将从SQL服务器数据库获取数据,然后数据将附加到PDF。 For example the data is 3 .
例如,数据是3 。 The displayed PDF on browser will like below:
浏览器上显示的PDF如下所示:
It is like filling a PDF form automatically. 这就像自动填写PDF表单一样。 Eventually, the PDF file can be downloaded with the data inserted.
最终,可以在插入数据的情况下下载PDF文件。
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.
因为我的网络应用程序基于Angular 7+,如果有一个角度库,它对我来说会更好。
Thanks in advance! 提前致谢!
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: 我的观点-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: 视图-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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.