Preview PDF from file data

Ionic Framework
1

Hello,

I’m trying to display a file preview with a PDF returned in binary or base64 by an API.
(Why? Because PDFs are generated temporarily and not stored on the server).

I tried @capacitor-community/file-opener but this package requires a filePath and is not compatible for base64 string.

I also tried opening the PDF in the in-app browser or in an HTML element such as or but that doesn’t work either.

I also tried to save the file locally and than get the path to the local file but the method writeFile of the package @capacitor/filesystem seems to only accept url as value in native devices.

Could you tell me if this is possible and if it is, how I can achieve this?

Thanks,
Loïc

2

Yes, that’s possible. Here is an example using the Capacitor File Opener and Capacitor Filesystem plugins:

import { Filesystem, Directory } from '@capacitor/filesystem';
import { FileOpener } from '@capawesome-team/capacitor-file-opener';

const openFile = async (base64: string) => {
  const { uri } = await Filesystem.writeFile({
    path: 'image.jpg',
    data: base64,
    directory: Directory.Documents,
  });
  await FileOpener.openFile({
    path: uri,
  });
};

Of course you can also use another Capacitor File Opener plugin. I chose the one from Capawesome because I am familiar with it.

1 Like
3

Hi @robingenz,

Thank you for your reply and for the code example :slight_smile:
So, I can’t preview the file without saving it in the device. Is that is?

4

That depends on your use case. If the file can be embedded in the webview, then this is not necessary (e.g. for an image). But if the file should be opened natively, then it must also be available on the native file system.

5

Ok I understand now, thank you again!

I works perfectly so :slight_smile:

Have a nice day,
Loïc

1 Like