Hello,

I'm doing some investigation for a project I'm about to embark on and was wondering if some of the wizards that inhabit this forum could help me determine if Prince is the tool for the job.

My requirements:

Be able to combine multiple SVG files into a single SVG file, then convent that SVG into a PDF. All of this without user-interactions (other than initiating the process and specifying a location to store the PDF).

My understanding is that Prince can convert HTML markup to s PDF and that an SVG embedded in that HTML comes along for the ride. Therefore, I'd have to render my SVG inside my HTML in order for Prince to perform its magic.

Followup questions:

1) How doe Prince behave in conjunction with HTML rendered using React/JSX?
2) Is there any API on the horizon for working with Node/js?

Thank you!

Prince can convert a standalone SVG file directly into a single-page PDF file, so it only needs to be embedded inside HTML if you need multiple pages or other HTML content.

There are a couple of Node.js compatible wrappers for Prince, like this one.

I'm not sure about the React/JSX question, that sounds like it would require testing.

Hi,
JSX would certainly need to be compiled into actual JS (but I guess that goes without saying ). I have not tested React-based content in Prince yet but this is a good reminder to do so! Just throwing a random React-based site I know off into Prince seems to render a good deal, but there may be server-side rendering involved here and there also are some scripting errors in the output. Do you happen to have an example page that is representative for the project you're going to do? If you don't want to post the example in a public forum you could also send me an E-mail on hr at hallvord.com

Announcement: repos for tests/utils

Hi,
I've taken a closer look at React. It does run in Prince, but it requires a bit of help in the form of polyfills because React uses some modern ES methods Prince does not support yet..

Firstly, here's a workaround for the missing Object.freeze() method. Add this code to a file and use the argument --script=filename.js when calling Prince:

Object.freeze = Object.freeze || function(){}

In addition, I had to save a few other scripts and run them as polyfills. To do so, I simply added several --script parameters referencing those script files.

• I used the Function.prototype.bind() shim on the Mozilla developer site.
  
• I used this Object.assign() shim but slightly modified to avoid Node-style module conventions
  
• I also had to apply a window.localStorage shim and fake document.cookie support, but I think that was for code specific to the demo I happened to test.

Also note that you need a recent Prince build to make sure you have some important bugfixes that happen to also improve React compatibility.

Announcement: repos for tests/utils

Hi Hallvord,

Have you been able by any means to get more recent react versions to work with Prince? Applying a quite extensive polyfill containing Object.freeze, Object.assign, Object.keys and Function.prototype.bind is still not enough to get past that point. Here is the link to the relative polyfill.io spec: https://polyfill.io/v3/polyfill.min.js?features=Object.freeze%2CObject.assign%2CObject.keys%2CFunction.prototype.bind%2ClocalStorage

Is there a more precise list of the polyfills needed? For now we are getting stuck behind TypeError: value is not an object after overcoming the other difficulties.

Have a nice day,