CODEWITHSUNDEEP
reactjspdfiframe
Prasad Patel
Prasad Patel

Reputation: 747

PDF file not loading in mobile view of React JS application

There is a "view" button when we click on it, there will be a pdf file loaded in the modal popup, PDF loads fine in the normal web browser but when opened in the mobile then PDF file in not loaded instead it is showing a blank page. I am using <iframe> for the PDF display.

What I am using:

 <div className="modal-body">
   <div className="common-form py-3">
     <div className="left-data padding-zero left-data">
       <div className="doc-height scrollbar-style-1 theme-min-height">
         {pdfFile !== '' ? (
           <iframe
               src={`${pdfFile}#toolbar=0&zoom=100&`}
               height="100%"
               width="100%"
               title="PDF Viewer"
               allow="fullscreen"
               className="pdf-iframe"
           />
           ) : (
              LOADING_PDF_FILE
           )}
       </div>
     </div>
    </div>
  </div>

In the above 'pdfFile' value is like "blob: pdf_file_URL"

PDF file is loaded fine for only few mobile devices, they are the below

iPad Air
iPad Pro
Asus ZenBook Fold

PDF file will be loaded when we click on "View" button/link like below is the reference image.

enter image description here

What am I doing wrong?

Upvotes: 0

Views: 37

Answers (1)

Syed Mohammad Mehdi
Syed Mohammad Mehdi

Reputation: 1

try to open pdf in chrome through inspect mode and change resolution to mobile size (like any device screen size which you are using), if it opens there then it means there is problem with how blob is getting loaded in specific mobile device browser.

Upvotes: 0

Related Questions