Viewing PDFs with PDF.js

[imhoffd]

https://github.com/mozilla/pdf.js

ref: https://github.com/capacitor-community/proposals/issues/15#issuecomment-659244394

[lmsantanam]

Hi, thanks for creating this, so is there no solution on how to simply open a pdf with an app using capacitor? I've been trying since last week with this and now I'm considering switching back this app to Cordova

[imhoffd]

How are you doing this in Cordova?

[lmsantanam]

How are you doing this in Cordova?

I'm not, this is my first time working with pdf files in Ionic. But for Cordova I've found a bit more information. Right now I'm following this tutorial to see if maybe I'm lucky

https://www.youtube.com/watch?v=k2iaGNApM9w

[muuvmuuv]

Anyone made some progress here? I am also tinkering about it. But I guess opening it in the build in browser and let that one display his own PDF controls is the easisiest solution right now. I would really like to not install 4 cordova plugins do display PDF's.

[lmsantanam]

Hi, in my case, I ended up using this plugin:

https://github.com/stephanrauh/ngx-extended-pdf-viewer

Is originally designed for Angular but adapting to Ionic was not very difficult

[muuvmuuv]

@LuisManuel1983 how did you got it working with Capacitor urls? I mean capacitor://localhost/_capacitor_file..... Here it just says "Unexpected server response (0) while retrieving pdf ---".

[lmsantanam]

@muuvmuuv sorry I've only worked with standard URL's to show a PDF that is hosted online, not local files. That "capacitor link" is unknown to me... btw did you try the plugin I suggested?

https://github.com/stephanrauh/ngx-extended-pdf-viewer

If your error is with that plugin I would suggest to look at the issues there, the creator of that plugin is really awesome and helpful

[muuvmuuv]

@LuisManuel1983 I am already using that plugin. I guess it just has something to do with pdj.js trying to parse the url different when having a custom protocol.

[elvisgraho]

Works with Ionic & Capacitor (pdf does not load with live reload when developing, because of CORS, but works fine otherwise)

https://github.com/stephanrauh/ngx-extended-pdf-viewer can use your local capacitor// url to open locally stored files.

      const uriResult = await Filesystem.getUri({
        directory: Directory.Data,
        path: `filename.pdf`,
      });

      // the path to the file
      const path = uriResult.uri;

      // convert to capacitor//
      const localFileURL = Capacitor.convertFileSrc(path);

(you can also get the url with cordova and old ionic plugins)

[buckmower]

Is there a solution for a React based Ionic App? I'm getting the error:

[Log] PDFJS.express: Development environment detected. This license key is currently registered to {mydomain} (PDFJSDocumentType.js, line 64020, x2)

The problem seems to be that capacitor://localhost isn't {mydomain} and furthermore doesn't qualify as localhost according to PDFJS.

[cyz1901]

Perhaps we can write a plugin that uses Swift and Kotlin native APIs to display PDF?

[liza-nt]

I have url of pdf which i am downloading using capacitor-community/http for file opener I am using capacitor-community/file-opener I am getting error like this File Dest file:///Users/parameswarmeher/Library/Developer/CoreSimulator/Devices/DC5D6B85-FD86-4D98-BE33-D7A767C0415C/data/Containers/Data/Application/FB862B43-FC24-458D-A5FD-FC9FA7C181A5/Documents/DOCUMENTS/test.pdf ERROR MESSAGE: {"message":"Unable to download file","errorMessage":"Unable to download file","code":"DOWNLOAD"} ⚡️ [error] - {"message":"Unable to download file","errorMessage":"Unable to download file","code":"DOWNLOAD"} ⚡️ [error] - Error downloading or opening the file: {"code":"DOWNLOAD","errorMessage":"Unable to download file"}

could you help me what I am doing wrong

here is my code

    async getPdfBase64(url: string): Promise<void> {
        try {
            const remoteUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
            const fileName = 'test.pdf'

            // Define the file path and options
            const filePath = `${Directory.Documents}/${fileName}`;

            // Download the file
            const options: any = {
                url: remoteUrl,
                filePath: filePath,
                fileDirectory: Directory.Documents,
                method: 'GET',
            };
            const response: any = await Http.downloadFile(options);
            console.log("respo", response)

            // Check if the file was downloaded successfully
            if (response.status !== 200) {
                throw new Error(`Failed to download file: ${response.statusText}`);
            }

            const fileOpenerOptions: FileOpenerOptions = {
                filePath: filePath,
                contentType: 'application/pdf',
                openWithDefault: true,
            };
            await FileOpener.open(fileOpenerOptions);
            console.log('File downloaded and opened successfully!');
        } catch (error) {
            console.error('Error downloading or opening the file:', error);
        }
    }