WebViewer Version:
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No, Happens in both Chrome and Brave
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? No
Please give a brief summary of your issue:
Hello, my team is testing out PDFTron for an Angular project (NOT AngularJS) and we wanted to test out the custom UI abilities of this library.
i get the following error
ERROR TypeError: Cannot read properties of undefined (reading 'setWorkerPath')
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
After importing pdftron webviewer library. Create an angular component and writing the following code
private documentLoaded$: Subject<void>;
constructor() {
this.documentLoaded$ = new Subject<void>();
}
ngAfterViewInit(): void {
Core.setWorkerPath('../lib/core');
let documentViewer: Core.DocumentViewer;
documentViewer = new Core.DocumentViewer();
documentViewer.setScrollViewElement(document.getElementById('scrollView'));
documentViewer.setViewerElement(document.getElementById('viewer'));
documentViewer.setOptions({ enableAnnotations: false });
documentViewer.loadDocument('/files/webview-demo-annotated.pdf');
documentViewer.addEventListener('documentLoaded', () => {
this.documentLoaded$.next();
});
}
Github repo to test this out : GitHub - varelycode/webviewer-angular-sample: Testing out doing a custom UI using pdftron
For some reason Core is undefined even though i can see the javascript in the console im importing from webviewer-core.min.js
I followed these instructions with both of the following with NO success:
PDFTron Systems Inc. | Documentation
and the guide on core didnt work either
system
June 28, 2022, 7:21pm
#2
Hello, I’m Ron, an automated tech support bot
While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:
Guides:
APIs:
Forums:
Hi Viviana,
Thank you for contacting WebViewer Support.
Following this guide on our website I made some changes to your project and the error went away. The following is your app.component.ts
modified code.
import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
@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() {
this.documentLoaded$ = new Subject<void>();
}
ngAfterViewInit(): void {
WebViewer({
path: '../lib',
initialDoc: '../files/webviewer-demo-annotated.pdf'
}, this.viewer.nativeElement).then(instance => {
this.wvInstance = instance;
instance.UI.setLayoutMode(instance.UI.LayoutMode.Single);
const { documentViewer } = instance.Core;
documentViewer.setScrollViewElement(document.getElementById('scrollView'));
documentViewer.setOptions({ enableAnnotations: false });
documentViewer.addEventListener('documentLoaded', () => {
this.documentLoaded$.next();
});
instance.UI.openElements(['notesPanel']);
});
}
ngOnInit() {
}
getDocumentLoadedObservable() {
return this.documentLoaded$.asObservable();
}
}
Please let me know if this works for you and if you have any questions don’t hesitate to contact me.
Best Regards,
Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.
This doesn’t answer my question. I can get this running through the WebViewer just fine too, but Im looking to use a custom UI without the viewer. However Im not sure how to get access to Core with a custom UI.
Please see this link for what I am trying to do: PDFTron Systems Inc. | Documentation
Hi Viviana,
Sorry about the misunderstood. Could you please check if you are following the following configurations?
The library containing the webviewer-core.min.js
file is not located inside the PROJ_PATH/src/app/
folder or any of its sub-folders
You have correctly added the path to webviewer-core.min.js
to the scripts
array under the build
options array in angular.json
You have correctly added the path to the library in the assets
array under the build
options in angular.json
Please let me know if even following all these configs you are still unable to access the Core.
Best Regards,
Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.