Hello,
Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
UI: ‘8.2.0’
Core version: ‘8.2.1’
Build: ‘MS8yMC8yMDIyfGYyZTU5NTU0YQ==’
WebViewer Server: false
Full API: false
Detailed description of issue
I get the error:
Error: PDFJS.express: A valid license key is required to use the view only build of PDF.js Express. Get your free license key at PDF.js Express (account required)
at p.e (PDFJSDocumentType.js:2219:250)
at pdfjsexpress.view-only.wasm:0x2167
at e.value (PDFJSDocumentType.js:2203:117)
at y (PDFJSDocumentType.js:2220:301)
at PDFJSDocumentType.js:2227:215
at L (PDFJSDocumentType.js:2177:340)
at Generator._invoke (PDFJSDocumentType.js:2177:92)
at Generator.t$jscomp$0. [as next] (PDFJSDocumentType.js:2178:25)
at n$jscomp$0 (PDFJSDocumentType.js:1931:389)
at c (PDFJSDocumentType.js:1932:65)
But the license is added correctly and I am serving at localhost.
Expected behaviour
The expected beahviour would be that the pdf gets displayed and the license is accepted.
Does your issue happen with every document, or just one?
I need to display documents that are time protected from S3. It happens to every document. Even local ones.
Link to document
Unfortunately they are protected by a time span
Code snippet
/* eslint-disable @typescript-eslint/no-explicit-any */
import {
AfterViewInit,
Component,
ElementRef,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import WebViewer from '@pdftron/pdfjs-express-viewer';
import { PdfService } from '@udc/udc-restclient';
import { BehaviorSubject, switchMap, take, tap } from 'rxjs';
@Component({
selector: 'udc-view-pdf-page',
templateUrl: './view-pdf.component.html',
styleUrls: ['./view-pdf.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class ViewPdfComponent implements AfterViewInit {
/** Reference to the viewer element */
@ViewChild('viewer') public readonly viewer?: ElementRef;
/** The webviewer instance */
wvInstance: any;
/** The name of the product */
public name = ' wird geladen...';
/** If the view is loading */
public readonly isLoading$ = new BehaviorSubject<boolean>(false);
/** If the user is not authorized */
public readonly showNotAuthorizedCard$ = new BehaviorSubject<boolean>(false);
/** If there was an error */
public readonly showErrorCard$ = new BehaviorSubject<boolean>(false);
constructor(
private readonly route: ActivatedRoute,
private readonly pdfService: PdfService
) {
this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
}
/** @inheritdoc */
public ngAfterViewInit(): void {
this.isLoading$.next(true);
this.route.queryParams
.pipe(
tap((paramMap) => {
this.name = paramMap['name'] || ' konnte nicht geladen wedren';
}),
switchMap((paramMap) => {
return this.pdfService.pdfControllerAccessPdf(paramMap['key']);
}),
take(1)
)
.subscribe(
({ url }) => {
WebViewer(
{
path: 'assets/pdfjs-express-viewer',
initialDoc: url,
licenseKey: 'xxx',
},
this.viewer?.nativeElement
).then((instance: any) => {
this.wvInstance = instance;
// now you can access APIs through the WebViewer instance
const { Core } = instance;
// adding an event listener for when a document is loaded
Core.documentViewer.addEventListener('documentLoaded', () => {
console.log('document loaded');
this.wvDocumentLoadedHandler();
});
// adding an event listener for when the page number has changed
Core.documentViewer.addEventListener(
'pageNumberUpdated',
(pageNumber: number) => {
console.log(`Page number is: ${pageNumber}`);
}
);
this.isLoading$.next(false);
});
},
(error) => {
switch (error.status) {
case 403:
this.showNotAuthorizedCard$.next(true);
break;
default:
this.showErrorCard$.next(true);
break;
}
this.isLoading$.next(false);
}
);
}
public wvDocumentLoadedHandler(): void {
// you can access the instance object for low-level APIs
const instance = this.wvInstance;
const { Core, UI } = instance;
// adds a button to the header that on click sets the page to the next page
UI.setHeaderItems((header: any[]) => {
header.push({
type: 'actionButton',
img: 'https://icons.getbootstrap.com/assets/icons/caret-right-fill.svg',
onClick: () => {
const currentPage = Core.documentViewer.getCurrentPage();
const totalPages = Core.documentViewer.getPageCount();
const atLastPage = currentPage === totalPages;
if (atLastPage) {
Core.documentViewer.setCurrentPage(1);
} else {
Core.documentViewer.setCurrentPage(currentPage + 1);
}
},
});
});
}
}
