How to enable annotation in PDFJS viewer

Question

I am using PDFJS and the viewer. I do however have the problem that annotation are not shown correctly like the are in the pdfs demo viewer https://mozilla.github.io/pdf.js/web/viewer.html.

Annotation correctly displayed in pdfs demo viewer:

Here is now it is displayed in my app using Chrome:

Here is how it is displayed I Safari using my app:

This is now I initialise the pdfs viewer:

function initPdfjs() {
    // Enable hyperlinks within PDF files.
    pdfLinkService = new (pdfjsViewer as any).PDFLinkService({
        eventBus,
    });

    // Enable find controller.
    pdfFindController = new (pdfjsViewer as any).PDFFindController({
        eventBus,
        linkService: pdfLinkService,
    });

    const container = document.getElementById('viewerContainer');
    if (container) {
        // Initialize PDFViewer
        pdfViewer = new (pdfjsViewer as any).PDFViewer({
            eventBus,
            container,
            removePageBorders: true,
            linkService: pdfLinkService,
            findController: pdfFindController,
        });
        // pdfViewer.textLayerMode = Utils.enableTextSelection() ? TextLayerMode.ENABLE : TextLayerMode.DISABLE;
        pdfViewer.textLayerMode = TextLayerMode.ENABLE_ENHANCE;

        // See https://github.com/mozilla/pdf.js/issues/11245
        if (Utils.isIos()) {
            pdfViewer.maxCanvasPixels = 4000 * 4000;
        }

        pdfLinkService.setViewer(pdfViewer);
        return;
    } else {
        console.error(`getElementById('viewerContainer') failed`);
    }
}

What do I need to do in order to get the annotations to display correctly in my app?

score 4 · Answer 1 · answered Oct 22 '21 at 05:24

I got it working. I don't know if it is the right way, but I post it in case somebody can use it.

First I setup webpack to copy the content from ./node_modules/pdfjs-dist/web/images to my dist folder so the images got included. That solved all the display errors except {{date}}, {{time}}.

    new CopyPlugin({
        patterns: [
            { from: './node_modules/pdfjs-dist/web/images', to: '' },
            { from: './l10n', to: 'l10n' },
        ],
    }),

To solve the {{date}}, {{time}} problem I set up a localisation service. I did that by copying the file ng2-pdfjs-viewer-master/pdfjs/web/locale/en-US/viewer.properties to ./l10n/local.properties in my project. Then it is copied to the dist folder by above webpack plugin. I then setup the l10n service in my pdfjs by adding this code:

// initialize localization service, so time stamp in embedded comments are shown correctly
l10n = new (pdfjsViewer as any).GenericL10n('en-US');
const dir = await l10n.getDirection();
document.getElementsByTagName('html')[0].dir = dir;

and added l10n to PDFViewer initialisation:

// Initialize PDFViewer
pdfViewer = new (pdfjsViewer as any).PDFViewer({
    eventBus,
    container,
    removePageBorders: true,
    linkService: pdfLinkService,
    findController: pdfFindController,
    l10n,
});

And now annotations is shown correctly:

What I find a bit weird is the date format. I used en-US as locale, so I would expect it to be mm/dd/yyyy (American way), but it is dd/mm/yyyy (like a dane would prefer it). I have tried to fool around with the date settings on my Mac and language settings in Chrome, but it doesn't look like it has any effect, so I don't know what to do if an American customer complains.

How to enable annotation in PDFJS viewer

1 Answers1