Generate a Pre-Filled HTML Template in Browser for PDF Export – Is This Approach Possible?

[MA8731174]

Hello everyone,

I'm working on a feature in my ThingWorx application where I want to generate a PDF from a pre-defined HTML template (3 pages), but with a slightly different approach than typical mashup-based rendering.

Here’s the idea:

• I have a fixed HTML template (a structured form or layout).

• Only two fields need to be dynamically filled using values from the ThingWorx runtime.

• The user should then see this HTML rendered directly in the browser (not inside a ThingWorx mashup container), just like a standalone form or page.

• After that, the user can generate it as a PDF, and manually fill in the remaining fields on paper after printing if needed.

I’m aware of PDF generation extensions (e.g., twx.pdf.extension), but in this case, I’m looking for something lightweight and interactive, where HTML is opened first in the browser, filled on load (maybe via a service or URL parameters), and then saved or printed by the user.

 

---

Any tips, best practices, or sample setups would be much appreciated!

Thanks in advance!

[MA8731174 · Accepted solution]

So for everyone else ,our solution was that in thingworx service we have choosen html as output and use jsdpf library as below:-

then on mashup load this service runs and assigns it to expression.

• html is passed as a parameter (it contains HTML content as a string — from service).

• A Blob is created with type "text/html".

• The Blob is converted into a temporary URL using URL.createObjectURL(blob).

• The output is a usable browser URL like blob:http://your-server/....

the output of expression we have assigned to NAVIGATION for url and then by clicking a button on mashup... it takes us to new tab and there i can generatepdf from my html..

one can also inject in html in thingworx like to fill the values any where with the code below:-

let template = Things["dummy.FileRepository"].LoadText({
path: "/PLN1/test.html"
});

template = template.replace("{{name}}", yourName);
template = template.replace("{{date}}", yourDate);

result = template;

I am happy to listen further suggestions about it...

[CharlesJi]

Hi @MA8731174, thanks for sharing the idea. It sounds very creative to me. Good work!

I guess you can also mark this as a resolution so that potentially more people can see this.

[MA8731174]

Thank you! I have marked it as solution.