Pdf in mobile from blob



  • Hi,
    I am quite new to quasar and I am facing an issue with embedded pdf in a mobile app.
    Let me explain, I am working on a reporting app which can generate pdf report from Blob and display them on your mobile. it’s working great on a laptop but as soon as I try on a mobile browser (or in chome device tester) the pdf fail to display and I don’t get why…
    I tried with the demo project and include my code to generate a pdf and the same problem occurs here again…
    I updated quasar and the pdf extension but I still have the same probleme
    Here is the simple test code I use…

      this.$axios.get('url/to/make/my/pdf', { responseType: 'blob' })
          .then(response => {        
            const blob = new Blob([response.data], { type: response.headers['content-type'] })       
            this.src = window.URL.createObjectURL(blob)
          })
      }
    
    <q-pdfviewer
          v-model="show"
          :src="src"
          :load="onLoad"
          :error="onError"
          content-class="absolute"
        />
    

    if someone can please please help me 🙂
    (and excuse my english)



  • Hi, I found a solution here : Android: URL.createObjectURL does not work properly

    let url = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
    // workaround for mobile playback, where it didn't work on chrome/android.
    // fetch blob at url using xhr, and use url generated from that blob.
    // see issue: https://code.google.com/p/chromium/issues/detail?id=227476
    // thanks, gbrlg
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status == 200) {
            var url = (window.URL || window.webkitURL || window || {}).createObjectURL(xhr.response);
    
            // now url is ready
        }
    };
    xhr.send();
    


  • @Florentin Thanks for this info. I have added it to the docs.



  • thanks @Florentin
    I don’t know about android but it’s still not working in ios 😞
    I will let you know if I manage to make it works



  • @livCSI Thanks, I would appreciate it - make sure you tag me so I see it, if you do



  • I finnaly manage to make it works! @Hawkeye64
    I simply add type=“pdfjs” in the vue part…
    Silly me, I must have tested it before updating the lib I guess… but it’s now working perfectly 🙂
    thanks



  • @livCSI Good to hear! Congrats on getting it to work.


Log in to reply