Effortlessly Open PDFs in Your Mobile Browser using Pdf.js

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%"}
height={window.innerHeight}></iframe>

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-distwebiewer.js file:

const HOSTED_VIEWER_ORIGINS = ["null", "http://mozilla.github.io", "https://mozilla.github.io", "http://localhost:3000", "https://www.mypropertycard.co.in"];
  

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.

In conclusion, our journey to effortlessly open PDFs in mobile browsers using Pdf.js has been both enlightening and practical. By harnessing the power of this versatile library developed by Mozilla, we've transcended the need for external PDF reader apps, making the process seamless and convenient for users.

Through detailed steps and insightful tips, we've demonstrated how Pdf.js can be seamlessly integrated into your web application, providing a native-like PDF viewing experience directly within the mobile browser. By following our guide, users can avoid the frustration of downloading additional software and enjoy instant access to PDF content on their mobile devices.

To further enhance your web development endeavours and explore innovative solutions like Pdf.js, visit our website at 3Brain Technolabs. Our expertise in web technologies can help elevate your projects to new heights, ensuring a smooth and efficient user experience every step of the way.

Unlock the full potential of PDF viewing on mobile browsers with Pdf.js and elevate your web applications with the expertise of 3Brain Technolabs. Streamline your development process and delight your users with seamless PDF access, all within the confines of their mobile browser.