4
import { Plugins } from '@capacitor/core';

const { Browser } = Plugins;

Browser.open({ url: 'http://www.africau.edu/images/default/sample.pdf', windowName:'_self' });

When the url is specified as a link to a website, it works fine but doesnt when specified a PDF. Could someone please suggest if any changes required ? Do i need to specify the rel ? If yes how ? There is no such key to be passed in open call. Response received is 'NO enabled plugin supports this MIME type'.

johnborges
  • 2,422
  • 20
  • 33
richa Singh
  • 435
  • 2
  • 5
  • 10
  • Try using ```window.open(http://www.africau.edu/images/default/sample.pdf)``` You don't need any plugin to use ```window.open``` – Shinichi Kudo Jan 18 '21 at 11:58
  • @ShinichiKudo window.open('http://www.africau.edu/images/default/sample.pdf','_parent'); or window.open('http://www.africau.edu/images/default/sample.pdf'); gives the same error – richa Singh Jan 19 '21 at 06:13
  • @richaSingh Is this for Android or iOS? – johnborges Apr 22 '21 at 14:03

2 Answers2

4

The Browser plugin from Capacitor should work fine for this. Try without specifying windowName.

// Capacitor v2
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;
Browser.open({ url: 'http://www.africau.edu/images/default/sample.pdf'});

// or for Capacitor v3
import { Browser } from '@capacitor/browser';
Browser.open({ url: 'http://www.africau.edu/images/default/sample.pdf'});

enter image description here

johnborges
  • 2,422
  • 20
  • 33
  • It doesnt open in the app for me , opens in a new tab instead. Can i take a look at your code ?Code pen ? BTW I'm using Ionic/React :5.4.0 and capacitor/core:2.4.2. – richa Singh Jan 19 '21 at 05:19
  • I could find a similar post on ionicForum https://forum.ionicframework.com/t/ionic-capacitor-browser-api-opening-new-tab/192708 – richa Singh Jan 19 '21 at 05:26
  • Also, is it possible to download the PDF too using Capacitor Browser ? – richa Singh Jan 19 '21 at 09:19
  • @richaSingh How are you testing? Simulator or browser? – johnborges Jan 19 '21 at 15:24
  • Was testing in browser, works fine in simulator . Thanks :) – richa Singh Feb 09 '21 at 09:44
  • When my file is placed within public folder, i get 'Cross origin requests are only supported for HTTP'. It seems to work fine when loaded through anchor tag's href attribute but when i pass the same url to Browser.open, it raises CORS error. any idea why and a possible workaround ? onclick={()=>Browser.open({url:`${process.env.PUBLIC_URL}/assets/sample.pdf`}) – richa Singh Mar 18 '21 at 03:00
  • The URL you're using is likely violating CORs rules. https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – johnborges Mar 18 '21 at 12:50
  • ya but why ? And when tried converting from base64 to blobURL, it throws error . blobUrl Richa blob:capacitor://localhost/86b2ea43-d5c5-4600-bf69-ddd270b0d29f ERROR MESSAGE: {"errorMessage":"","message":"Invalid URL"} – richa Singh Mar 21 '21 at 19:07
  • @AnantaPrasad What error are you getting. This plugin works for iOS & Android. – johnborges Apr 21 '21 at 18:19
  • 1
    It doest not preview the pdf on downloads directly in android – Ananta Prasad Apr 22 '21 at 03:54
-2

InAppBrowser will not pdf files. you will have to use it in some other way,

first you can simply add a href this will open user default browser.. like for android it will open this link in android and for ios it will use safari.

<a  href="http://www.africau.edu/images/default/sample.pdf">open pdf</a>

Second way is to use a plugin for document viewer .. i have added its link below

constructor(private document: DocumentViewer) { }

const options: DocumentViewerOptions = {
  title: 'My PDF'
}

this.document.viewDocument('http://www.africau.edu/images/default/sample.pdf', 'application/pdf', options)

https://ionicframework.com/docs/native/document-viewer

Taylor Rahul
  • 709
  • 6
  • 19