PDF link only in browser

Ionic Framework ionic-v3
1

My app has few content areas where contents are in HTML format.
This content area contains links of external PDF files.

Browser and Android open them in new browser tabs (which is exactly what I want)

But, iPhone opens those links in the same view(in my app) as if I am have opened some PDF reader. Till here it is okay.
The real problem after above is that I don’t see a back button. I can’t find a way to close it and go to original page.

Is there a way I can force iPhone to open PDF links in browser(for now)?

I have looked at In App Browser syntax to open one external file anyway we want. But It would require to handle some events which system will trigger while opening PDF links. While doing that I have to take actual PDF link and pass it in the object of InAppBrowser.

2

we are in the same boat!

3

Few days back, I had to remove the plugin cordova-plugin-ionic-webview due to CORS issues.

Now to solve the issue mentioned in this topic, I had to add it again. Now everything works properly as much as I have checked.
But the CORS issue started again in iOS.
Will add complete solution after resolving it.

4

i’ve opened pdf’s in ios with https://ionicframework.com/docs/native/in-app-browser/

there’s a target=’_blank’ option for new window

1 Like
5

Im developing a PWA, yesterday I found other way to get the pdf using File-saver, you can try out, for me it was the solution.

here is my code to implement it.

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import  * as FileSaver  from 'file-saver';

@Injectable()
export class FileServiceProvider {

  constructor() {
 
  }

  save(blob,fileName){
    FileSaver.saveAs(blob, fileName);
  }

}

when I call it.

download(value) {
    let blob = new Blob([this.s2ab(atob(value))], {
      type: TYPE_BLOB
    });
    this.file.save(blob, this.params.name + '.pdf');
  }

  s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }

the param called value is the pdf in BASE64.

cheers !!

1 Like
6

@cityfresno @josechepe Thanks for suggestions.
In App Browser is there already in my mind (in case other normal solutions doesn’t work).
Also, those links could be a PDF or a page link. So, basically I have to add few codes to detect that.

Anyway, I have managed to fix the CORS issue in iOS. All network calls are behaving normally in all devices and browsers.

But, links in HTML content type areas have become non-clickable in iOS (others are perfect).
This issue may be specific to my project. I will add further solutions into this chain.
May be I have to whitelist http://localhost:8080 as mentioned in installation guide.

7

Solution -

If it isn’t already, include cordova-plugin-ionic-webview to your project.
Follow this solution to tacle the CORS issue in iOS device.

Now, at this point your app’s links in iOS should open themself in browser.

If not(as in my case), you may need to remove <allow-navigation *** /> from your config.xml file.
Follow this topic incase you haven’t found solution from above steps mentioned.

Incase you are inrested in solution with In App Browser for dynamically generated HTML contents, you can follow answers mentioned by cityfresno or josechepe or use something like mentioned in this solution or in this page. It just adds event listeners on each anchor tags to extract link URL and pass it to InAppBrowser plugin.

1 Like