I need to open Pdf / Docx documents for preview from a Phonegap app.
On Android it's possible to open files in extenal apps using WebIntent plugin.
Now what about iOS? It seems possible to do this entirely with the build-in browser (which surprisingly does render docx) by creating a html page with a header and a back button in the top and an iframe taking up the rest of the screen.
It would be great if the user could zoom and drag the document while the header would remain stationary, but I couldn't get to zoom working at all inside the iframe.
Any suggestions?
I ended up using InAppBrowser Plugin with enableViewportScale=yes. It displays a toolbar with a back button with custom caption. It would be better if I can add my own toolbar, so the navigation is consistent in the whole app, but this is good enough.
Related
I have a PWA saved on the home screen, this opens up standardly without search bar nor the bottom buttons (share, tabs, etc..).
So every link gets opened inside the PWA, and that is expected.
I have a problem when showing pdfs as they normally open in Safari with the "share" button and all the bottom bar, but in the PWA they open up without bottom bar and without any share button.
So my idea is to open the PDF link (http://www.mywebsite.com/download/pdf/12345) in a new safari window,.
I tried putting target="_blank" on the PDF link but this did not solve the problem.
I also tried forcing the iOS behavior by opening the app in safari with safari://http://www.mywebsite.com/download/pdf/12345 but with no luck.
How do I open a New Safari window to a link?
OK, the ONLY working solution is to tell iOS you are going onto another domain.
PWA stays in your app frame ONLY if you stay in the same domain.
To open a link within your domain in an EXTERNAL window (or inside the PWA but with Safari standard controls) you have to send it to an external/different domain.
So the PWA is on https://www.mywebsite.com/ and you want to open a PDF with all Safari control buttons, you just create a SUB domain and point the link to it, like https://media.mywebsite.com/download/pdf/12345 at this point the PWA thinks you are on a different domain and does the correct rendering! 🎉
You can try to use window.open(url).
But, remember to put it in an element with onclick event attribute.
For example,
<button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>
Reference: window.open(url, '_blank'); not working on iMac/Safari
EDIT
You can set a scope in manifest.json to customize where to open an external link.
You can refer https://developers.google.com/web/fundamentals/web-app-manifest on the property scope.
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?
You can resolve this issue by doing some tricks (for any device without back button):
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).
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).
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>'+ i18nextHelper.i18next.t('Exit From PDF') +'</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.
I am developing the app like ibooks by reference,in that the pdf is not enabling the menu i.e while I long tap the pdf it not showing Menu like copy , define.
How can I work in menu? Help me.
The linked solution simply does not implement text selection or glyph coordinate extraction/conversion. You need to parse the PDF page content stream and track glyphs on the page. CGPDFOperatorTable can be a starting point, however I suggest reading the PDF spec and getting familiar with the multiple transformation matrix states that a page can have - it's quite tricky to get right. You also need to embed various CMaps (character maps) so that all fonts can be correctly parsed. It took me more than a year to get a reliable text extraction for >99% of all PDF documents. If you want to save this time, you can check out the commercial PDF SDK I am working - google for PSPDFKit. We support iOS and Android.
We have a main page in which we are having pdf links. On click of these links the page will redirect to another page which contains iframe. The pdf document will be displayed in that iframe. This scenario is working in other OS other than IOS. In IOS the iframe is showing only the pdf part of screen size. It is not providing scroll bar as well for us to scroll down. We tried changing css Overflow: scroll but did not work.
If you are using iOS 8, there is a bug with displaying PDFs in iframes that basically truncates the PDF file to display only the first page like an image would display. Apple has yet to come out with a fix for this (4+ major releases into iOS 8). This affected an application used by my salesforce in the filed on their tablets/phones so I have to create a work-around. Until Apple fixes their issue this is working for us.
Interim solution: Use Google Docs Viewer as pass through for documents
Little know feature of google docs is the ability to pass through a URL to a PDF. Works like a charm in iOS 8.
//url of your PDF hosted wherever you currently keep it
var pdfurl = 'http://www.manning.com/crowther/HH5aCSS3_SampleCh-01.pdf';
//wrap the url with the google docs gview url
pdfurl = 'http://docs.google.com/gview?url=' + pdfurl + '&embedded=true';
Maybe this workaround can help you too.
JSFiddle Demo
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method