CODEWITHSUNDEEP
phppdfwebviewuiwebviewandroid-webview
Elysianitez Zuhair
Elysianitez Zuhair

Reputation: 11

How to display embedded PDF file in WebView?

I need a suggestion/advice on how to solve this. Currently I am building a Web application in PHP 8.2 where users can upload PDF files and only users with certain roles have the ability to see them. This application is also available via Mobile Application, however my team decided that we will use Web View for the listing/displaying the pdf files in the Mobile Application. The Web Application are being built in Kotlin for Android and Swift for iOS. Also, to retrieve the file, the "user with certain role" must provide his JWT token for authentication before the system can retrieve the file from an endpoint.

I would also like to point out that the PDF files are stored in my Web Server, so that the UI can retrieve it easily.

The way we plan to display the PDF file is that, the PDF file are embedded inside the WebView page. So far we have tried multiple methods:

  1. iframe tag (Using direct path from storage)
  2. iframe tag (Using Google Docs Viewer)
  3. PDF.js (JS Library)

For the first method, the PDF didn't load for Android, however iOS can load it. For the second method, both Android and iOS managed to display it, however I have to risk putting the JWT in the URL because there are no other way to pass the JWT token for authentication. For the third method, the PDF didn't load at all for both Android and iOS.

I feel like I have reached a dead-end and this feature seems impossible to implement within WebView. For the Developers out there, have you created something similar to this? What method did you guys used to retrieve the PDF File so that it can be readable in WebView Page for both iOS and Android.

Upvotes: 1

Views: 1112

Answers (2)

Ken Lee
Ken Lee

Reputation: 8073

In my experience, the webview component requires you to use <embed></embed> to render the pdf, such as the following:

<embed src="https://drive.google.com/viewrng/viewer?embedded=true&amp;url=https://www.targetdomain.com/xxxx.pdf" style="width:100%;height:400px;"></embed>

In the past, we will use google pdf viewer link (as above) to do the job, but recently it has been disabled by google. (but if you can find a valid google pdf viewer (or any other alternative pdf viewer) then you can use it - but the url which I am using in the past has been disabled)

So as an alternative, you need to create a reader first

(1) Create a simple PDF reader (assuming that you put it on www.yourdomain.com)

reader.php

<?php 
  
$file=file_get_contents($_GET["url"]);
header('Content-type: application/pdf');
header('Content-Transfer-Encoding: binary');
echo $file; 
?>

(2) Use the following in your webview (assuming the pdf is at https://www.targetdomain.com/xxxx.pdf)

<html>
Hello , this is a test
<br><br>

<embed src="https://www.yourdomain.com/reader.php?url=https://www.targetdomain.com/xxxx.pdf" style="width:100%;height:400px;"></embed>

</html>

The result will be:

enter image description here

Last but not least, if you use the above method, you must be sure that allow_url_fopen directive is enabled otherwise file_get_contents may fail if the reader and pdf are residing on two different servers

Upvotes: 1

Abhishek Kumar
Abhishek Kumar

Reputation: 135

we have done the same thing using php and pdfjs only. the role based user permissions to view specific pdf files only. please check below code how we did his . the trick is you have to display content by fetching base64 encoded data of pdf file which are stored in directory above public folder. and file parameter is passed through get parameter

   <?php
       
       session_start();

       include "conn.php";
       $file = $_GET['file_id'];
  
       // Check file list from mysql database if permission exists
       $q= mysqli_query("select * from files where id='$file' ");
       
        // check file view permission respective to logged user
        
        if($permission){

             $file_path ="../path_to_pdf_above_public_folder/".$file;
             
             $pdf_data= file_get_contents($file_path);
             $pdf_data = base64_encode($pdf_data);

             include "pdf_viewer.php";
             // implements your jspdf into this file to display pdf from $pdf_data variable;  
                     

        }else{
           die("You DO Not have permission");
        }

  ?>

To implement pdf_viewer.php from base64 data refer below link.

https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html

Upvotes: 0

Related Questions