CODEWITHSUNDEEP
iosvue.jspdfprogressive-web-appshtml-framework-7
Bahman Parsa Manesh
Bahman Parsa Manesh

Reputation: 2370

Issue with openning PDF in iOS 11.3 Using PWA

I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :

window.open(pdf_url, "_blank");

And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.

But for example in iOS 11.3 there is no button and user has to use home button to close PWA.

I tried to solve problem using iframe but I can show only first page of the pdf.

Is there any way to fix this issue?

Upvotes: 1

Views: 1632

Answers (1)

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3560

You can resolve this issue by doing some tricks (for any device without back button):

  1. if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
  2. you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
  3. you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.

I use second and third point in real project and its work fine...

This is sample close button code used in popup: 

'<p><a href="#" class="button button-small popup-close">'+ i18nextHelper.i18next.t('Exit From PDF') +'</a></p>'

Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.

Good luck.

Upvotes: 1

Related Questions