Links not clickable in the rendered pdf.

I did read the previous issue #199 which had explained some of the possible reasons links are not working and hence I imported the AnnotationLayer.css. But still, I am facing this issue of links not being clickable.

Here is my code

import React, { Component } from 'react';
import { pdfjs, Document, Page } from "react-pdf";

import 'react-pdf/dist/Page/AnnotationLayer.css';
import './__style.css';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

class Catalogue extends Component {
  constructor(props){
    super(props);
    this.state = { numPages: null, pageNumber: 1 };
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  goToPrevPage = () => {
    const { pageNumber } = this.state
    if (pageNumber !== 1) {
      this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
    }
  }
  goToNextPage = () => { 
    const { pageNumber, numPages } = this.state
    if (pageNumber !== numPages) {
      this.setState(state => ({ pageNumber: state.pageNumber + 1 }));
    }
  }
  getPages = () => {
    const items = []
    let i = 1
    let { numPages } = this.state
    while (i <= numPages) {
      items.push(<Page pageNumber={i} key={i * Math.floor(Math.random() * 1000) + 1} style=""/>);
      i++;
    }  
    return items
  }

  render() {
    return (
      <div class="magazine">
        <div>
          <Document
            file={process.env.PUBLIC_URL + '/files/' + this.props.pdfFile}
            onLoadSuccess={this.onDocumentLoadSuccess}
          > 
            {this.getPages()}
          </Document>
        </div>
      </div>
    );
  }
}

export default Catalogue

Please let me know if I am missing out anything. Thanks!

Environment

• React-PDF version [e.g. 3.0.4]: 4.1.0
• React version [e.g. 16.3.0]: 16.12.0

[ghost]

I’m on version 5.7.1 and import 'react-pdf/dist/Page/AnnotationLayer.css' doesn’t work. I tried import 'react-pdf/dist/esm/Page/AnnotationLayer.css' but get this:

Any other options for getting links to actually work in the rendered PDF?

This import got it working for me. import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

[tjsudarsan]

@rishabhbatra10 I too faced the same problem, but this is nothing to do with the @wojtekmaj’s react-pdf library.

I just converted my pdf to word which has links that’s not working and found that the hyperlinks are not added to those texts. So, I added the hyperlinks in the word documents and then converted to PDF, hosted it on my server again.

Now, it’s working fine and I get the links in onGetAnnotationsSuccess callbacks too.

The problem is we got confused that the links without hyperlinks works both on Adobe Reader and also on the Chrome PDF Viewer. It seems, they detect the links that are not hyperlinked and hyperlink the same.

Provided that we should import the Annotation Layer css in our ReactApp

import 'react-pdf/dist/Page/AnnotationLayer.css';