search

pdfme / pdfme

A TypeScript based PDF generator library, made with React.
https://pdfme.com
MIT License
2.16k stars 192 forks source link

Support pdf file in graphics image #440

Closed necessarylion closed 2 months ago

necessarylion commented 2 months ago

The use case is to embed PDF file like existing png and jpg/jpeg image type. Where PDF file can be Logo or coupon etc...

Please play below gif image for more detail.

ScreenRecording2024-03-04at3 55 08PM-ezgif com-video-to-gif-converter

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments | Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **pdfme-playground** | ⬜️ Ignored ([Inspect](https://vercel.com/labelmake/pdfme-playground/HoeNGnCP4TNLGDvYMZjRjSM7L1UE)) | [Visit Preview](https://pdfme-playground-git-fork-necessarylion-main-labelmake.vercel.app) | | Mar 6, 2024 5:53pm | | **pdfme-playground-v4** | ⬜️ Ignored ([Inspect](https://vercel.com/labelmake/pdfme-playground-v4/Gm3tnHJrrvuLZFJKwf9H1TkxWDHc)) | [Visit Preview](https://pdfme-playground-v4-git-fork-necessarylion-main-labelmake.vercel.app) | | Mar 6, 2024 5:53pm |
hand-dot commented 2 months ago

Hey @necessarylion !!

It can't be added to the existing image because it only works in the browser.

Converting PDFs to PNGs in a Node.js environment might not be impossible. Could you try using the following as a reference? https://github.com/mozilla/pdf.js/tree/master/examples/node

I would like to merge it if it passes all the existing tests and adds a new test for embedding PDFs.

necessarylion commented 2 months ago

Hey @necessarylion !!

It can't be added to the existing image because it only works in the browser.

Converting PDFs to PNGs in a Node.js environment might not be impossible. Could you try using the following as a reference? https://github.com/mozilla/pdf.js/tree/master/examples/node

I would like to merge it if it passes all the existing tests and adds a new test for embedding PDFs.

@hand-dot Thanks for quick review.

I believe it should function in Node.js too. Instead of converting to PNG or JPEG, we're utilizing the embedded PDF page feature from the pdf-lib library.

Additionally, to display the PDF in the browser, I'm employing the pdfjs library. pdfjs transforms the PDF into a canvas and then into a blob URL, which can be used in HTML image element.

Regarding test, let me fix and include a new one.

hand-dot commented 2 months ago

@necessarylion

we're utilizing the embedded PDF page feature from the pdf-lib library.

Ah Okay perfect 👍

necessarylion commented 2 months ago

@hand-dot I've fixed the failed test related to pdfjs and added a new test for the PDF image type as well.

It appears that importing pdfJs related files into the @pdfme/schemas package isn't feasible as it needs to be utilized in a generator. Therefore, my approach was to pass pdfJs from the @pdfme/ui package to schema.ui, and subsequently convert the PDF file into a canvas using pdfJs.

hand-dot commented 2 months ago

Hey @necessarylion Thank you for quick fix! Looks good.

I'll final test on the playground and after that I'll merge and publish this PR!!!

hand-dot commented 2 months ago

@necessarylion Released!! https://github.com/pdfme/pdfme/releases/tag/3.4.0