How to open PDF with in app browser Ionic Vue?

Question

I have a problem with read or view pdf in app with ionic vue. I have already try to use library of all vue pdf viewer, but until now no one is supported with vue 3 and ionic.

At least i have tried using in app browser ionic native, but its also not working, only showing blank page.

My code:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button
            :default-href="pageDefaultBackLink"
          ></ion-back-button>
        </ion-buttons>
        <ion-title>{{ document.judul }}</ion-title>
        <ion-buttons slot="end">
          <slot name="actions-end"></slot>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content >
        <in-app-browser/>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton} from '@ionic/vue';
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { format } from 'date-fns'
import { useRoute } from 'vue-router'
import { InAppBrowser } from '@ionic-native/in-app-browser';

export default  {
  name: 'Tab1',
  components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonBackButton, InAppBrowser},
  setup() {
    let document = ref([])

    const options = [{
      location: 'no',
      zoom: 'no',
      hideurlbar: 'yes',
      toolbarposition: 'bottom'
    }]

    InAppBrowser.create('http://www.africau.edu/images/default/sample.pdf', '_self', options)
    
    const route = useRoute()

    onMounted(() => {
      getDocument()
    })

    function getDocument(){
      axios.get(`document/${route.params.id}`)
      .then(response => {
        document.value = response.data
      }).catch(error => {
          console.log(error.response.data)
      })
    }

    return {
      document,
      getDocument,
      format,
    }
  }
}
</script>

Maybe there is have another better library choice for view pdf in app with ionic vue. Thanks before.

What's the error when you're doing this? First, change the single quotes around your URL, by this ```'http://www.africau.edu/images/default/sample.pdf'``` — Shinichi Kudo, Feb 01 '21 at 13:14
Could you try using this import ```import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'``` — Shinichi Kudo, Feb 01 '21 at 13:56
return error [vue-cli-service] This dependency was not found: [vue-cli-service] * @angular/core in ./node_modules/@ionic-native/in-app-browser/ngx/index.js [vue-cli-service] To install it, you can run: npm install --save @angular/core Because i dont user angular — ASHafizullah, Feb 01 '21 at 14:03
Sorry, didn't see you were using Vue. Did you try using ```window.open(URL)``` ? I can't see any problem in your implementation, or try using ```InAppBrowser.create('http://www.africau.edu/images/default/sample.pdf', '_system')``` — Shinichi Kudo, Feb 01 '21 at 14:08
yes, its work with _system, but its will lauch outside the app. I want the pdf showing under the ionheader, at ion content. I use _self and its didnt work, showing blank. — ASHafizullah, Feb 01 '21 at 14:11
i just add that line in my config.xml, but when i run app with: ionic capacitor run android -l --host=192.168.1.4, the config.xml is reset — ASHafizullah, Feb 01 '21 at 15:17
This command opens Android Studio, then check for the config.xml in Android Studio, and override this value, before you run the app on your device — Shinichi Kudo, Feb 01 '21 at 15:20
i already try add that line in android studio, at path folder app-> res->xml->config.xml. But its still blank :( — ASHafizullah, Feb 01 '21 at 15:25
https://stackoverflow.com/questions/26304729/not-able-to-launch-a-pdf-file-in-inappbrowser-in-android i see this question, i think in app browser cant show pdf — ASHafizullah, Feb 01 '21 at 15:31
So i use window.open() and its work. Thanks for your help sir @shinici — ASHafizullah, Feb 01 '21 at 15:45

How to open PDF with in app browser Ionic Vue?

0 Answers0