Effortlessly Open PDFs in Your Mobile Browser using Pdf.js

Last updated on 17 Feb, 2023

Many people find it frustrating when they try to download PDFs to their mobile devices only to realize that they don't have the necessary software to open them. It can also be time-consuming to constantly search for and download a PDF reader app every time they encounter a PDF while browsing online. In our latest blog post, we'll provide you with some straightforward steps on how to easily open PDFs in your mobile browser without the need for any additional software or apps. With these techniques, you'll be able to view PDFs on your mobile device quickly and conveniently, saving you time and minimizing any inconvenience associated with dealing with PDFs on mobile devices.

We've resolved the issue by utilizing pdf.js, a library created and maintained by Mozilla.

Upon visiting the link for the first time, you can navigate to the Download section of the page to choose the version you want. In our case, we used "Prebuilt (modern browsers)".

If you don't want to download and use it directly for different use cases, you can. However, for the PDF viewer use case, I suggest downloading it because once you download and extract the ZIP file, you will see that pdf.js has already done some work to enable us to view PDFs and added a toolbar and other controls from the user's point of view.

Now, we will utilize viewer.html and pass a file URL or object URL using a file query string parameter. In our case, we used an object URL generated using the URL.createObjectURL method.

<iframe title="PDF" src={`/pdfjs-3.0.279-dist/web/viewer.html?file=${urlObject}`} width={"100%"}

After completing these steps, you will be able to view your PDF with a toolbar and all, and it will look identical to the browser's native PDF viewer.

To ensure proper functionality, there are some additional steps, or "hacks," that you should implement.

When supplying a URL or object URL to pdf.js, it may throw CORs errors and URL origin errors. To resolve this issue, you must update the value of the HOSTED_VIEWER_ORIGINS variable depending on your project requirements. In our case, we added the following code to the publicpdfjs-3.0.279-distweb iewer.js file:

const HOSTED_VIEWER_ORIGINS = ["null", "", "", "http://localhost:3000", ""];

Next, you need to allow CORS for the same hosts from your server. In our case, we used the CORS module in Node.js to allow requests from specific hosts only. Once you make these changes, you're all set, and you'll be able to view your PDF in both your web and mobile browsers.

Opening PDF files on your mobile browser has never been easier. With pdf.js, a powerful open-source library from Mozilla, you can view PDFs effortlessly on your browser. By following the steps outlined in this article, you can easily configure your mobile browser to display PDFs with a native feel. With the benefits of pdf.js, you can now view PDFs on your mobile browser with ease and convenience.

about author

Hitesh Agja

I am Hitesh Agja, and I have 12+ years of industry experience. I am always excited and passionate about learning new things, technical or not. Life is all about learning new things and making the world more progressive.

Let's talkhire -button