Pdf Creator on Capacitor Project

From @phan post:

@patrick this is normal in Capacitor?
Is there a way to get the generated PDF and use it with the write file capacitor plugin under data option with base64?

Little bump here

Anyone manage to make it happen?

I could add a getBase64 method to the component which then can be used with the capacitor file system actions.

That would be nice!

Thanks…

Will you share the code for me to add in or will only be available in next Wappler Updates?

I’ve added the getBase64 method to the component.

dmxPdfCreator.zip (13.5 KB)

The UI will not have the method, just select the print method of the pdf creator and edit then the generated code. Flow will then look like:

[
  {
    run: {name: "pdf", outputType: "text", action: "{{pdfcreator1.getBase64()}}"}
  },
  {
    Capacitor.Filesystem.writeFile: {
      name: "writeFile",
      output: true,
      outputType: "object",
      data: "{{pdf}}",
      directory: "DOCUMENTS"
    }
  }
]

I follow your steps, PDF button when click , Nothing appear. Where did I missed Out?

@phan on the android emulator, minimize the app, go to files, and search the generated file.

If you need to open the pdf after being generated, I’m sure that’s another logic

You manage to make it happen ? As I cannot find any files in the emulator , I also try on Android Phone also cannot find any… Do you have a simple video steps to guide me? Thanks

Can you show a screenshot of the write file step?

I attached the short video capture here.

Attached is the project zip file.
MARBS.zip (54.5 MB)

I was missing the path in my sample code, that will cause an error. The path is the filename you want to write/

[
  {
    run: {name: "pdf", outputType: "text", action: "{{pdfcreator1.getBase64()}}"}
  },
  {
    Capacitor.Filesystem.writeFile: {
      name: "writeFile",
      output: true,
      outputType: "object",
      path: "myFile.pdf",
      data: "{{pdf}}",
      directory: "DOCUMENTS"
    }
  }
]

The web version doesn’t write to the filesystem but to an indexedDB instead, you can inspect it in the devtools under the Application tab.

On Android 11 and higher the documents folder only allows access to the files your App created.

See for more info:

I got it

Question.

  1. For Web Just use pdfcreator.Open() will able to show pdf output nicely.
  2. For Android , anyway to open the pdf upon clicking the pdf button like the same behavior of Web Application?

I normally don’t work with Capacitor so had to look it up. What I found is that you first use Filesystem.writeFile as we already did. This will save the file in the documents folder. Then you use Filesystem.getUri to get the system Uri to the file. After that you need Capacitor File Opener Plugin to open the pdf.

The file opener plugin is not available in Wappler, you will need to create your own custom extension for that.

@patrick thanks for the base64 option.
Now we are here, there’s a chance to get a pdf area with pdf creator in a framework7 project?
I see we can get the pdf content option with bootstrap but not with F7.
I didn’t try much, it’s not a priority but it would be good to know. :slight_smile:

Do you still need help on this?
I can make a quick example if you need it

Sure , I am so happy you offer the help. Thanks in Advance