Create a Web Link to a Specific PDF Page For Desktop & iOS

In this tutorial, I'm going to show you how you can create a URL that will link to a specific page in a PDF. This works for desktop by default, and with the JavaScript provided, it also works on mobile.

How to create your PDF specific page link url

First you will want to have the URL to your PDF file. It should look something like this:

https://element.how/files/document.pdf

Then you will want to append this to specify which page you would like the PDF to open on. You will want to change the '3' to the page of your choice.

#page=3

You should now have something like this

https://element.how/files/document.pdf#page=3

This should already work fine as it is. Clicking a link with this href attribute should open the PDF to the proper page.

But it won't work as it should on mobile...

How to link to a specific PDF page on mobile devices (iOS)

On mobile, for some reason, it works only if you remove the equal symbol.

That's true for iOS, at least.

On Chrome & Android, the PDF file will download automatically, and there is nothing we can do about it.

For example, this would work on iOS:

https://element.how/files/document.pdf#page3

But now if you add your URL that way, it won't work on desktop anymore!

What's the solution? Some JavaScript that will automatically change all the PDF page specific links on your page, to mobile ready links, only if the visitor is using a mobile device.

Here is that code:

document.addEventListener('DOMContentLoaded', function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform)) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform))) {
   document.querySelectorAll('[href*=pdf]').forEach(e => {
      if (e.href.indexOf('page=') > -1) {
         e.href = e.href.replace('page=', 'page');
      }
   });
}
});

What the code does:

1. Checks if the device is a mobile device of some sort
2. If so, selects all links on the page with 'pdf' in the slug
3. Loops through them, and if they have the string 'page=', changes it to 'page' (removes the =)

Add this JavaScript to your footer, and all the links on your page should now open to the proper PDF page, for all devices (except Android chrome)!

Finally, enjoy your page specific PDF links!

I hope you found this helpful. If so, let me know in the comments below.

Cheers!