PDF Document templates - to output the html text created using ckeditor widget

Hi Guys, I have an app that uses the ckeditor widget to capture the users text and images entered. ckeditor text taken from HSQL Db Manager: <p><strong>Detailed Description</strong></p> <ol>     <li><strong>one</strong></li>     <li><strong>two</strong></li>     <li><strong>three</strong></li> </ol> <p><img data-image-guid="30680772461461905" src="file?guid=30680772461461905" style="height:504px; width:600px" /></p> <p><span style="color:#2ecc71">Test Continuation</span></p>     <p>rthh</p> For auditing purposes, I need to generate a PDF and want to display the text AND images entered in by the user. The fields is defined as “Render XHTML = true” in the template document. I’m getting the text but no image(s) just a gap where the image would be. Does anyone know if this method will work or is there a better way to display the text and images entered in by the user in PDF form?  
2 answers

Hi Adrian,

I ran into the same issue and found that this only works with image mode set to base64 in the ckeditor widget. If its too late to make that change then you can use a java action to parse your html string and replace all of the image tags src with the base64 string.

Here is an example using the jsoup library. This has a string input and string output. I think the only thing you would need to change is the module name and entity name in the xpath retrieve. Also I used the image upload microflow setting in the ckeditor to call a microflow when an image is uploaded. I used the base64 community commons java action to convert the image to base64 and store the string in the entity. You could also edit the java action to convert the image to base64 instead of storing the string in an attribute.

// This file was generated by Mendix Modeler.
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
// Special characters, e.g., é, ö, à, etc. are supported in comments.

package docugen.actions;

import java.util.List;
import com.mendix.systemwideinterfaces.core.IContext;
import com.mendix.webui.CustomJavaAction;
import org.jsoup.Jsoup;
import org.jsoup.select.Elements;
import org.jsoup.nodes.Element;
import org.jsoup.nodes.Document;
import com.mendix.systemwideinterfaces.core.IMendixObject;
import docugen.proxies.TemplateImage;
import com.mendix.core.Core;

public class ReplaceImages extends CustomJavaAction<java.lang.String>
	private java.lang.String HTML;

	public ReplaceImages(IContext context, java.lang.String HTML)
		this.HTML = HTML;

	public java.lang.String executeAction() throws Exception
		//create variables to use later
		String src;
		String base64String;
		String base64Prefix = "data:image/png;base64,";
		String base64Complete;
		//parse document
		Document doc = Jsoup.parse(HTML);
		//retrieve all img tags
		Elements img = doc.getElementsByTag("img");
		//loop through image tags
		 for (Element el : img) {

			 // If alt is empty or null or already has the base64 encoded
             if(el.attr("src") == null || el.attr("src").contains(base64Prefix) || el.attr("src").equals("")) {
            	//dont change anything if it is already base64 encoded

             } else if (el.attr("src").contains("file?guid=")){

				 //the id is stored with a prefix of file?guid= , so we split the string in two from the equal sign, and then store the object id in a variable
				 src = el.attr("src");
				 String[] parts = src.split("=");
				 String id = parts[1];

				 //retrieve mendix object list by id
				 List<IMendixObject> result = Core.retrieveXPathQuery(context(), "//DocuGen.TemplateImage[id" + "='" + id + "']");

				 //the list will always contain one object, so take the first object out of the result list
				 IMendixObject firstObj = result.get(0);

				 //Retrieve the base64 string and add the base64 prefix
				 base64String = firstObj.getValue(context(), TemplateImage.MemberNames.Base64String.toString());
				 base64Complete = base64Prefix + base64String;

				 //change the img tag to contain the base64 string
				 el.attr("src", base64Complete.toString()); 
             } else {
                 //dont change anything

         return doc.toString();


	 * Returns a string representation of this action
	public java.lang.String toString()
		return "ReplaceImages";



Hope this helps!


there is the print screen to pdf on app store, but the library is not updated.

I have modified this, you can down load via git hub




to build : gulp build

will generate the .mpk file at folder test

copy this to your project widget folder, 

usage: just specific a class name to print inside the widget

Hope this help