Getting CSS selector error while integrating PSPSDF library in my angular application

Question

I need to preview a docx in existing URL, as previewing docx type on the browser is not supported by the browser defaultly. I choose to go with this library.

<div class="pdf-viewer">
    <div #pdfContainer style="width: 100%; height: 100vh"></div>
</div> here

Above is my HTML code.

PSPDFKit.load({
        container: '#pdfContainer',
        document: candidateDocumentUrl,
});

Above is my TS code. But above code changes in giving

Configuration#container` must either be a valid element or a CSS selector
PSPDFKitError: `Configuration#container` must either be a valid element or a CSS selector

Please let me know why i am getting this error (CSS selector), inspite of using the fetching the ID as mentioned in their offical document. Due to this i not not able to preview the docx type file.

Answer 1

You are using #pdfContainer which is a template reference syntax in angular. So the error you got mean PSPDFKit tried to look for element with that ID

To fix it you must define the id for your element

<div id="pdfContainer" style="width: 100%; height: 100vh"></div>

In your component change the id accordingly

PSPDFKit.load({
        container: 'pdfContainer',
        document: candidateDocumentUrl,
});

If container: 'pdfContainer', is not a valid syntax you can try to use

PSPDFKit.load({
            container: document.getElementById('pdfContainer'),
            document: candidateDocumentUrl,
    });