How to view a pdf file in the browser,when clicking on a link - html

I have developed an application using HTML 5. To make the application compatible with the mobile devices I have used cordova/phonegap.
Now the problem is that, the PDf files which is there inside the application is only getting downloaded, when clicked on the link. I need to get it opened in the browser, when clicked on the link. It works fine with the PC. But not with the mobile devices.
I stored the link to a variable and passed that variable to google. Now using some sort of services from google, the link is getting opened in the browser.
I tried installing inAppbrowser plugin also.
window.open(Furl, '_system', 'location=yes');
This was the line of code used, where Furl is the name of the variable, into which, the url address of the pdf file is passed.
This line of code works fine, when url address of a webpage is passed to the variable. But not with the pdf files.
Apart from that idea, is there any other solution for this problem?
Can someone help me out with this problem?
-Thank you

As stated already on a comment, it is possible on modern browser since they have in-built PDF viewer. This isn't the case for Android or iOS currently. What you could do is to convert the PDF to PNG image and then show that. There is a PDF2PNG plugin available for this purpose. Also, if you only need to support iOS 6 & 7, you can take a look at the PDF Viewer plugin.

Related

How to open a local HTML file in Safari on an iPad

I'm teaching a Year7 class via Zoom on writing HTML, and I have one student on an iPad (the rest are on desktops/laptops), and they're not able to get their webpage to open in Safari (I'm using Chrome on Windows, which of course is simply a matter of double-clicking on the file). I'm trying to see what she sees, but I think Zoom is possibly not showing me the pop-up dialogues. She is using Notes to write the page (which looked to be the closest iOS equivalent to Notepad).
I Googled and sent her a few blogs, but still not working. I said she needs to click on Share and look for something like "copy path to file" or "copy link", and then paste that into the Safari address bar. She said when she did that Safari was showing the source code, not the rendered page. When she just taps the file it opens in Notes, not Safari. That made me suspect her file was actually index.html.txt (she tells me she has extensions switched on), but when I sent her my own file, which is definitely only index.html, she says the same thing is happenning.
Is anyone able to give me some definite step-by-step instructions (this is for a Year 7 student) on how to open their local HTML page in Safari?
thanks,
Donald.
Safari iPad no longer supports access to local or iCloud files. A number of iPadOS apps will however allow a user to view, edit, and test html code in files stored in local iPad, iCloud, or third party (e.g. Google or Dropbox) storage folders. One needs only to search in the App Store for “html editor” to see the list. Some of the apps have features that rival or exceed those found in tools on desktop (laptop) systems.
I had the same issue today on ios15.
There is a free app called Koder available on the App Store which will let you edit and view the HTML file. I’m no expert but the editor looks pretty fully featured at first glance.
Sorry to say but an iPad is obviously not the best place for simple HTML editing. At least not with the default apps available on iOS.
Given an existing HTML File one can use Files app to navigate to it and open it with double click. This will open the file in a very simple viewer wich is at least able to render the HTML. As a developer i bet its using WKWebView which is basically Safari's HTML View.
Turns out Microsoft Edge, unlike Safari, can still open local html files. Discovered in this answer. To wit:
Install Microsoft Edge from the App Store
Open Files (or whatever file browsing app you like).
Open the file, then tap the Share button to send to another app.
Scroll across to "More...", choose Edge, and voila!

Embedded PDF Issue in Edge Browser

When using the Microsoft Edge browser, by default when you open a PDF it will open the PDF in a new tab using the built-in PDF viewer. To avoid this, you can adjust the browser's settings: Toggle on the "Always open PDF files externally" option. This works great. However, it presents a separate issue. Our internal applications use embedded PDFs in iframes. When the external toggle is set to on, these PDFs will not show in the iframes. This doesn't happen in Chrome. Has anyone else experienced this and know a work around?
I've tried removing the type="application/pdf" from the iframe tag to no avail. I can't find anything else online.
It looks like an expected result because you have enabled the option Always open PDF files externally.
So MS Edge browser is giving you an option to download the PDF file and open it using the desired app.
You said this doesn't happen in Chrome browser.
If you enabled the Download PDF files instead of automatically opening them in Chrome option then you will notice the same result in the Chrome browser.
Output in the Chrome browser:
If you click on the Open button then it will download the PDF file.
I did not get any solution or a workaround for this issue.
If you think that there should be an option to load the file in an iframe if Always open PDF files externally option is enabled then I suggest you click on the Send Feedback button in the MS Edge browser and try to provide your feedback about it to the Microsoft.
I posted feedback suggesting that an exclusion/inclusion list be in included but the simplest way would be to treat the frame as part of the session. But this is not Microsoft it is the Chrome projects issue.

open pdf in iphone webapp

I am trying to open a pdf from my JQM webapp. I have tried iframes/embed/object, and none of those work on an iphone like they do on a desktop browser (scrolling, zooming, etc). I have settled with simply opening the pdf via a link Link. This works fine in the standard browser because the user can simply use the browser back button to navigate back to my app.
The issue that I am having, is that when a user saves the page to thier home screen and opens it using the chromeless safari browser, they no longer have the browser back button. I have tried adding target="_blank" to the link, but apparently JQM hijacks the link and prevents opening in a new page, and I have been unable to get the hacks to work.
I have also tried pdf.js, but I can't seem to even get that to work as my javascript knowledge is fairly limited, and the examples are pretty advanced. The only tutorial that I found used an old version which I couldn't get to work.
Are there any ways to bypass the JQM in openning a link in a new window (which would in turn open in the mobile safari rather than my chromeless web app), or are there any other suggestions for how to open a pdf from a webapp?
Just disable the default jQuery Mobile behaviour, by specifying data-ajax=false.
For example:
Link
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
For my webApps I used https://docs.google.com/viewer to embed the pdf into my interface.
So, when I navigate the webApp by home screen icon, the app doesn't close when I open the pdf.
I met the same question: open pdf in webapp with html5.
I've tried several solutions: iframe、embed、pdf.js, but none of them is the best solution.
tips: iOS 9.x upper, open pdf with iframe only show the first page of the pdf file, and there will be a <img /> tag in the iframe body when you debug.
util now I still have this troublesome problem, anyone has solution please write your experience here.
Thank you.

Use Adobe reader instead of chrome pdf viewer to display a pdf

I'm outputting a pdf which has been made with scribus, and in all browsers except for chrome it outputs fine, however with chrome the letters are cut off and lower than usual. I found that disabling the chrome pdf viewer fixes the issue locally. But what about users who do not have it disabled? Is there some way I can make adobe reader show it instead of the chrome pdf viewer in my code?
Any help is appreciated,
Thanks
Edit: I can't make the user download the pdf as it is somewhat a preview before they send it in.
One option would be to use a Content-Disposition header to force the PDF to download as an attachment. When the user clicked on the downloaded file, it would then open in their registered PDF viewer rather than in Chrome.
I ended up flattening the pdf using the flatten option, it unified the result accross all browsers.

Is there any way to communicate between my .exe application and Firefox?

Is there any way to communicate between my .exe application and Firefox?
Because, I have my own webpage. I'm using FireFox to browse it.
I have an application (in c++) to process a piece of HTML code from my webpage within FireFox. My application can print something directly to printer (raw print).
Since now, I coudn't access firefox's DOM content (page HTML source) from outside firefox; Also, I coudn't print directly to printer (raw print) from firefox.
Now, I'm looking solution for this problem. Here are my possibilities:
1.) My web page I can copy my related text to clipboard.
2.) My web page I can write my related text to Firefox's cookie.
3.) My web page I can write my related text to a file from client's PC.
4.) Any other way to send my related text to my .exe application.
But I don't know how can I do:
How can I copy to clipboard within firefox,
How can I read FireFox's cookie from my .exe application,
How can I create file in client's PC.
Is there any way to communicate between my .exe application (in c++) and Firefox?
You have to write an extension for firefox an use its API. For example see nsIProcess:
"The nsIProcess interface represents an executable process."
Assuming that your page has a true URL outside of FireFox, you could solve your problem by registering a custom protocol handler. E.g. register "X-myprettyprinter". Then, in FireFox, from http://www.example.com/index.html you can redirect to X-myprettyprinter:http%2D%2Dwww.example.com/index.html. FireFox doesn't know how to handle the X-myprettyprinter protocol so it hands off the URL to the OS, which then hands it to your registered application. Bonus: it works for all browsers. Downside: you have to retrieve the URL yourself and render the page again in-process
You could write an addon for firefox that allowed some form of integration with your application.
Here is a tutorial on writing firefox addins.
The best way to do this is to skip the .exe application and just make an ad on for FireFox, Take a look at the FireBug ad-on. It can pull certain codes out of a web page, If you use the API I bet you could do what your .exe program should.