Links not clickable in the rendered pdf.

[rishabhbatra10]

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

[wojtekmaj]

Anything in the console?

Try adding

onRenderAnnotationLayerSuccess={console.log}
onRenderAnnotationLayerError={console.error}
onGetAnnotationsError={console.error}

to your <Page /> component. Maybe it will tell us something. If not, we'll need to make an interactive codepen to see what the problem might be.

BTW:

key={i * Math.floor(Math.random() * 1000) + 1}

that's a horrible, horrible idea.

[rishabhbatra10]

Thank you for your reply @wojtekmaj. I added the event listeners but nothing is logged on any of the above listeners.
While onLoadSuccess logs this

Is there anything we should make sure to add in pdfs to make the links like this work?

Haha and that key thing I know was just playing around 😛

[wojtekmaj]

If neither onRenderAnnotationLayerSuccess nor onRenderAnnotationLayerError were called, then no annotations were loaded. Check is onGetAnnotationsSuccess callback returns something (it should).

Attach PDF file if it still fails.

[rishabhbatra10]

onGetAnnotationsSuccess callback returns blank arrays, here is the pdf file.
pankhuri-issue_1-vol_1.pdf

[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';

[asharafshahi]

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?

[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';

[emmanuellion]

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';

Thanks, it perfectly work for me !