Empty blank with Capacitor 5, lib not working

[mkvashennikov]

Hi! This library not working after i update my mobile Ionic application to Capacitor 5. Only i face with this problem?

Version info

• 17.4.6

[JulienLecoq]

This is working for me, only the download part isn't working.

[stephanrauh]

@mkvashennikov Ionic isn't my primary focus, nor am I familiar with it, so I need your help. Would you mind to send me a reproducer? That's a small but functional application showing the bug, and I need to be able to get started within a few minutes.

[mkvashennikov]

This is working for me, only the download part isn't working.

What version you use? Maybe Angular 16 broke this lib, because before i update my app to Capacitor 5, all working correct.

[mkvashennikov]

@stephanrauh

I found what was wrong. I had to set the CapacitorHttp flag to false. Apparently, because of this, the request to the PDF file was not executed.

[JulienLecoq]

This is working for me, only the download part isn't working.

What version you use? Maybe Angular 16 broke this lib, because before i update my app to Capacitor 5, all working correct.

I'm using Angular 16 with Capacitor 5.

[JulienLecoq]

@stephanrauh

I found what was wrong. I had to set the CapacitorHttp flag to false. Apparently, because of this, the request to the PDF file was not executed.

Mhh, I also have it set to false. But in your case, does the download button works? In both iOS and Android? I only tried on iOS and it is not working for me, I get the following error when clicking it:

Failed to open URL blob:capacitor://localhost/4a440c87-e245-4c6a-8fad-d19b6d5aafef: Error Domain=NSOSStatusErrorDomain Code=-10814 "(null)" UserInfo={_LSLine=268, _LSFunction=-[_LSDOpenClient openURL:fileHandle:options:completionHandler:]}

I just tried to set the CapacitorHttp flag to true and I confirm that setting it to true prevent the PDFs from loading.

[mkvashennikov]

Mhh, I also have it set to false. But in your case, does the download button works? In both iOS and Android? I only tried on iOS and it is not working for me, I get the following error when clicking it.

Nope. I don't use download button, but if i want to save some pdf-file, i use Filesystem Capacitor Plugin (https://capacitorjs.com/docs/apis/filesystem). At first step i decode PDF from server to Blob file and at second step i save file in internal device. This works perfectly, maybe you must realize custom button for download pdf-file if you want make download pdf on Android and iOS.

[stephanrauh]

Is this idea something I should add to the documentation?

[JulienLecoq]

Mhh, I also have it set to false. But in your case, does the download button works? In both iOS and Android? I only tried on iOS and it is not working for me, I get the following error when clicking it.

Nope. I don't use download button, but if i want to save some pdf-file, i use Filesystem Capacitor Plugin (https://capacitorjs.com/docs/apis/filesystem). At first step i decode PDF from server to Blob file and at second step i save file in internal device. This works perfectly, maybe you must realize custom button for download pdf-file if you want make download pdf on Android and iOS.

Yes, that's what I have done 2 days ago as a workaround. But instead of using the filesystem plugin of Capacitor, I'm using this plugin cordova-plugin-file since I'm already used to it. But I think I will switch to the filesystem one later, in order to use "recommended" techno.

[JulienLecoq]

Is this idea something I should add to the documentation?

Yes, this would be a good idea. So basically 2 steps :

First, set the CapacitorHttp config to enabled: false in the capacitor.config.ts/capacitor.config.json file. Otherwise, the ngx-extended-pdf-viewer lib wil show a blank PDF file.

const config: CapacitorConfig = {
    appId: 'XXXXXXX',
    appName: 'XXXXXX',
    webDir: 'XXXXX',
    plugins: {
        CapacitorHttp: {
            enabled: false,
        },
    },
}

Second, use an "Ionic" plugin like the Capacitor filesystem or cordova-plugin-file with a custom download button using the <pdf-shy-button></pdf-shy-button> component in order to download the PDF file on Android/iOS.

ps: The native download button (the one created by ngx-extended-pdf-viewer) can still be used for the web platform from inside an Ionic application.

[stephanrauh]

To dos left:

• [ ] add the hints kindly provided by Julien to the showcase

[stephanrauh]

I'm closing this ticket now because I don't think I'll ever manage to address it.