PDF Viewer for PHPRadClassic 2.73

July 19, 2022, 03:14:09 PM

PDF is one of the most widely accepted document formats. It's quite usual to let the Users of the application upload PDF document using the `File Upload` field. However, in order to view the PDF, the User will need to download the PDF and then open it in the PDF Viewer application. We will simplify this by adding a built-in PDF Viewer to our application wherein, the User will be able to view the PDF right inside our application itself.

PDF Viewer does not work out-of-box, and we will need to write some code for that. There are several jQuery-based PDF Viewer components available. Some are free, some are under a Creative Commons license whilst some are Free for personal, but you will need to buy a license for its commercial use. For this tutorial, I'm going to use the "PDFjsViewer" component from the following GIT repository.

PDF-JS Viewer

GIT Repository:
https://github.com/dealfonso/pdfjs-viewer

Download:
https://github.com/dealfonso/pdfjs-viewer/archive/refs/heads/main.zip

Before you proceed further...
Please download the ZIP file from the GIT and extract it. We will need to copy certain files from this folder to our application folder later in this tutorial.

Tutorial Roadmap

1. First, we will create a simple database with just one table for this demo project.
2. Then, we will create a new project in PHPRadClassic 2.73 using this newly created Database.
3. We will set some field properties to make sure everything is set properly.
4. Later, we will start integrating PDFjsViewer by copying the required JS and CSS files to the respective folders under our exported application's folder.
5. Finally, we will write some Javascript code to actually implement the PDFjsViewer in the "View" page of our table.

So, let's get started.

Please download the attached PDF file for the full tutorial. I'm restricted by the BBCode on the formatting front. Therefore, I've prepared this PDF file to share with you all.