React-pdf: PDF Base Template

[jdegger]

Hi, it doesn't seem to be possible to use a existing PDF as the base for the newly generated PDF.

Is this something that is not possible because of the way that react-pdf renders the PDF or might this be an useful addition?

Use cases:

• [ ] We have a designed poster PDF which we only have to overlay an existing QR code on
• [ ] We have pre-designed invoice templates which only need the actual invoice lines the be generated on the fly

It is possible to recreate the content of the pre-designed poster, but that would require much more work.

Let me know if this is already possible and I just somehow missed in the documentation or how I can assist with the possible creation of this.

Thanks

[diegomura]

Hey!

That's not possible with this lib unfortunately. React-pdf it's just for generating new docs.
I agree it would be cool to have a feature like this, but it's not trivial. You can see a discussion about this on the pdfkit repo here. pdfkit is what we use to actually generate docs

I don't see this feature coming to the lib in the sort term, but I'll keep this ticket open for further reference.

[jdegger]

Thanks for the quick reply and I understand!

A slight difference between the pdfkit ticket is that they are talking about editing the PDF. Does adding stuff on top the existing PDF count as editing or might it perhaps be possible to just see the existing PDF as a background image? The base PDF is not really edited in terms of editing the actual contents of the PDF.

[diegomura]

I’m essence it’s almost the same thing: opening an existin pdf document. This cannot be done with React-pdf and neither pdfkit, as far as I know. If this is not the case let me know!

The only solution I can propose you is actually getting an image from your PDF and use with some 100% width and height and position absolute to create a background. The you add items on top

[jdegger]

I’m essence it’s almost the same thing: opening an existin pdf document. This cannot be done with

React-pdf and neither pdfkit, as far as I know. If this is not the case let me know!
So far I haven't had any luck. I'm not too familiar with the inner workings of PDF either so that's why I asked.

The only solution I can propose you is actually getting an image from your PDF and use with some 100% width and height and position absolute to create a background. The you add items on top

This is how we solved it now :) Only downside is the file size and the loss of scalability.

Thanks for the quick replies, we will see if this is something the future can bring us.

[wyqydsyq]

I've also run into this, another way react-pdf/pdfkit could potentially make things easier for this use-case is by supporting embedding SVGs. Most PDFs can be converted to SVG quite easily preserving vector paths to maintain scalability and avoid bloating filesize with raster image data, but react-pdf/pdfkit seem to only support embedding .jpg and .png.

I'm going with the solution of my template converted to a .png to be displayed via Image, but if Image could support .svg would make this almost just as good as native .pdf import for most cases

[kishaningithub]

Given now we have Canvas element which can do SVGs i am thinking of using that to generate the template and then put in the data inside the SVG using string interpolation. This is just an idea which i am thinking of trying out, Will keep this thread posted.

[kishaningithub]

The path parameter in pdf kit does not support a "direct import" of SVGs created using tools like inkscape etc. Have also found this interesting library that does the conversion.
https://github.com/alafr/SVG-to-PDFKit

[diegomura]

The new 2.0 will have support for svg (already in beta in npm), although it's hard to get full support for svg on top of pdfkit. I mention this because of the above solution of importing a pre-existing pdf as svg into a react-pdf document. In theory it should eventually work, but in practice I have serious doubts we will reach such a sophisticated SVg engine to acutally have a nice result.

About importing pre-existing docs, it's not in the roadmap so I'm closing this issue