search

cesarvr / pdf-generator

Cordova plugin to generate pdf in the client-side
MIT License
107 stars 61 forks source link

How to add an image that is local to the pdf generator file, cordova-plugin-pdf? #105

Open jggj21 opened 4 years ago

jggj21 commented 4 years ago

Good morning I find myself trying to upload an image to the pdf that is generated with this library, but I don't know where in my project I should have the image and how the code should be to import it. Can someone please support me

Structure of my project: image

nothing in the documentation: documentation: https://www.npmjs.com/package/cordova-pdf-generator

cesarvr commented 4 years ago

Hi I wrote this example project, where you can find how to load assets from internal memory.

Hope it helps.

jggj21 commented 4 years ago

I can't understand the complexity :(, I just want to know in which folder I should save the image and then how to show it in the pdf.

jfoclpf commented 3 years ago

@jggj21 you just need to put the image files in any folder accessible by the app (check the object cordova.file by console.log(cordova.file) to see what you have access to. You also need plugin cordova-plugin-file) and then use a normal img html tag

const pdfhtml = '<img src="path/to/image.jpg">'
pdf.fromData(pdfhtml, options).then(......
ballhausenkarl commented 2 years ago

@jggj21 I have done an implementation using embedded image as it is not required to target a path, think is a faster option for development using crossing platforms for static images in a PDF file, like logos or something offline. Simply convert your image to base 64 plain text and add it as follow to your img tag.

<img src="data:image/png;base64,REPLACEFORYOURBASE64TEXT" alt="ballhausen.png" style="height: 40px;">

Link to do the image conversion, https://base64.guru/converter/encode/image

Hope this helps, Gerar Ballhausen. Ballhausen Ingeniería México.

Serializ3r commented 2 years ago

@jggj21 I have done an implementation using embedded image as it is not required to target a path, think is a faster option for development using crossing platforms for static images in a PDF file, like logos or something offline. Simply convert your image to base 64 plain text and add it as follow to your img tag.

<img src="data:image/png;base64,REPLACEFORYOURBASE64TEXT" alt="ballhausen.png" style="height: 40px;">

Link to do the image conversion, https://base64.guru/converter/encode/image

Hope this helps, Gerar Ballhausen. Ballhausen Ingeniería México.

thank you mister, you're a life saver, your solution worked great for me!

pchitrakar-tt commented 2 years ago

Images do not show from api 30. I have tried using base64 images but still does not work.