How to display links in PDF.js?

Question

JavaScript

Good evening guys. On the project, you need to view pdf files. I used the pdf.js library .
I made a page-by-page output, displayed the text in a separate layer, but ran into a problem.
The problem is that there are links in the pdf files. And I can't display these links.
Here is an example function for drawing text on a separate layer:

the code

pageTextLayer (page) {
            return page
                .getTextContent()
                .then(textContent => {
                    let container = this.$refs.pdfTextLayer
                    container.innerHTML = ''

                    PDF.renderTextLayer({
                        textContent,
                        container,
                        viewport: this.viewport,
                        textDivs: []
                    })
                })
        },

It works great, all the text is displayed, but the links are displayed in plain text.
I googled for a long time, dug into the source codes of the examples and found a method that allows you to get the annotations of the current page, like what you need:

the code

pageAnnotationLayer (page) {
            return page
                .getAnnotations()
                .then(annotations => {
                    annotations.forEach(annotation => {
                        // нужны только ссылки
                        if (annotation.subtype !== 'Link' && !annotation.url) {
                            return
                        }

                        // Но вот тут дальше не пойму что делать, если с выводом слоя с текстом есть отдельный метод, который создаёт div элементы с нужным позиционированием и размером, то с аннотациями я так и не нашёл нужного метода
                    })
                })
        },

Help me understand how to display links in a separate layer

Answer 1

Found this solution

// Loading document.
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  // Document loaded, retrieving the page.
  return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfPageView = new PDFJS.PDFPageView({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });
});

Here both text and links are added, you still need to connect CSS so that the annotation falls into place.
import 'pdfjs-dist/web/pdf_viewer.css';
You can also do it using the method you found:

import { AnnotationLayerBuilder } from 'pdfjs-dist/lib/web/annotation_layer_builder';
import { SimpleLinkService} from 'pdfjs-dist/lib/web/pdf_link_service';
import NullL10n from 'pdfjs-dist/lib/web/ui_utils.js';

var annotateMeta = page.getAnnotations().then(function (data) {

        var annotation = new AnnotationLayerBuilder({
          pageDiv: textcontainer,
          linkService: new SimpleLinkService(),
          pdfPage: page,
          l10n: NullL10n
        })
        annotation .render(viewport);
      });

But I like the first one better.