Hey nari.naresh2022
The code you shared with me on my side works fine. You could check the video I have recorded. https://pdftron.s3.amazonaws.com/custom/test/jack/Screen+Recording+2023-01-05+at+3.11.00+PM.mov
Could you update the webviewer library to see if there is still a problem?
Here is the code I am using:
import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { Core, WebViewerInstance } from '@pdftron/webviewer';
import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('viewer') viewer: ElementRef;
wvInstance: WebViewerInstance;
@Output() coreControlsEvent:EventEmitter<string> = new EventEmitter();
private documentLoaded$: Subject<void>;
constructor(@Inject(DOCUMENT) document: Document) {
this.documentLoaded$ = new Subject<void>();
}
ngAfterViewInit(): void {
WebViewer({
path: '../lib',
initialDoc: '../files/V3S Aggrement.pdf'
,enableRedaction: true
,fullAPI:true
}, this.viewer.nativeElement).then(instance => {
this.wvInstance = instance;
this.coreControlsEvent.emit(instance.UI.LayoutMode.Single);
const { documentViewer, annotationManager, Annotations } = instance.Core;
instance.UI.setHeaderItems(header => {
header.push({
type: 'actionButton',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
onClick: () => {
debugger;
// save the annotations
annotationManager.exportAnnotations({ links: false, widgets: false }).then(xfdfString => {
console.log('xfdfString',xfdfString);
})
}
});
})
instance.UI.openElements(['notesPanel']);
documentViewer.addEventListener('documentLoaded', () => {
var math = instance.Core.Math;
const redactAnnot1 = new Annotations.RedactionAnnotation({
PageNumber: 1,
Rect: new math.Rect(100, 100, 300, 200),// Rect are in the form x1,y1,x2,y2,
FillColor: new Annotations.Color(197, 68, 206),
OverlayText: "Test",
TextColor: new Annotations.Color(228, 66, 52),
TextAlign : "Center"
});
redactAnnot1.Color = new Annotations.Color(197, 68, 206);
redactAnnot1.StrokeColor = new Annotations.Color(197, 68, 206);
redactAnnot1.Font = "44pt";
const redactAnnotations = [redactAnnot1];
annotationManager.addAnnotations(redactAnnotations);
annotationManager.drawAnnotationsFromList(redactAnnotations);
documentViewer.getAnnotationManager().applyRedactions();
this.documentLoaded$.next();
});
// Bind Annotations fron DB
documentViewer.setDocumentXFDFRetriever(async () => {
// load the annotation data
const response = await fetch('https://localhost:44313/api/Annotation');
const xfdfString = await response.text();
return xfdfString;
});
//Save redaction to DB
annotationManager.addEventListener('annotationChanged', (annotations, action) => {
if (annotations.length > 0 && action === 'delete') {
annotations.forEach((annot) => {
let annotForSave = {
height: annot.Height,
width: annot.Width,
x : annot.X,
y: annot.Y,
pageNumber : annot.PageNumber,
overlayText : annot.OverlayText,
fontSize: annot.FontSize,
textColor : annot.TextColor,
// fillColor:{'R':annot.Ij.R,'G':annot.Ij.G,'B':annot.Ij.B,'A':annot.Ij.A}
}
console.log('annotJson', annot);
console.log('annotForSave', annotForSave);
});
}
})
})
}
ngOnInit() {
}
getDocumentLoadedObservable() {
return this.documentLoaded$.asObservable();
}
}
