Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8
Detailed description of issue
i have collected the xfdfString value and based on my checkbox checked, i need to show that annotation on the PDF, and i have got the response to bind in this way.
i get an error saying .
“Uncaught (in promise): Error: Two instances of WebViewer were created on the same HTML element. Please create a new element for each instance of WebViewer”
Expected behaviour
with that screenshot value i need to show the annotation on my PDF, my requirement is that based on checkbox value i must hide and show the annotation.
Does your issue happen with every document, or just one?
yes
Link to document
{Provide a link to the document in question if possible}
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
It seems like the main issue is creating multiple instances of WebViewer. If it is intended to create multiple instances of WebViewer, please create it on an other HTML element.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
hi zserviss,
Thanks for your response, the same response works fine, when i am creating a new annotation, but the same one doesnt work when i am passing xml file as same when i was able to achieve during annotation add.
so you mean, i need to render one html for adding annotation and one html for showing the annotation?
Thanks,
Rakshitha
No, I would recommend to use the same instance of WebViewer. Please just render it once on initialization.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
here, based on checkbox selected, i am passing the above image data as param and i have coded, this way:
setAnnotation(event: any) {
WebViewer(
{
path: ‘…/…/wv-resources/lib’,
},
this.viewer.nativeElement
).then((instance: any) => {
instance.docViewer.on(‘annotationsLoaded’, () => {
instance.showAnnotations(event.annotationString);
});
});
}
and during initialisation, i am calling the WebViewer inside ngAfterViewInit() and only this is called inside ngOnInit()
this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
ngAfterViewInit(): void {
let doc = sessionStorage.getItem(‘pdfViewer’);
WebViewer(
{
path: ‘…/…/wv-resources/lib’,
},
this.viewer.nativeElement
).then((instance: any) => {
const { documentViewer, annotationManager } = instance.Core;
this.hidingButtons(instance);
instance.UI.loadDocument(this.base64ToBlob(doc), { filename: ‘myfile.pdf’ });
this.viewer.nativeElement.addEventListener(‘pageChanged’, (e: any) => {
const [pageNumber] = e.detail;
console.log(Current page is ${pageNumber});
});
// listening to annotations
annotationManager.addEventListener(‘annotationChanged’, (annotations: any, action: any) => {
if (action === ‘add’) {
// added alert message to capture message
}
});
});
}
when i have submitted alert message, i am capturing the export data using this,
instance.Core.annotationManager.exportAnnotations();
Thanks,
Rakshitha
I would move the logic from setAnnotation to ngAfterViewInit.
This way you can capture the xfdf when annotations are changed.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
