How to include a WYSIWYG field including images in a PDF using iText 5?

I am using Summernote WYSIWYG edit on bootstrap to store formated text and images. The image is included in the text field and stored in the database (MySQL as mediumtext). There is no reference to the image. I am then using iText 5 on the server side (java) to create a PDF. The code works if there is no image included; however, when an image is included in the WYSIWIG input text field and stored on the databse then iText does not show the paragraph in the PDF, all other fields are included. How do I show the field corectly formated and including images please? My code is:

Document document = new Document(PageSize.A4, 72f, 72f, 72f, 72f); PdfWriter.getInstance(document, resourceImage); document.open(); p6.add(new Chunk("Description:   ", smallBold)); ElementList list1 = XMLWorkerHelper.parseToElementList(activityDtl.getPPDescription(), null);              for (Element element : list1) {    p6.add(element);    preface6.add(p6); }


Kind reagrds,

Glyn

What kind of content does "activityDtl.getPPDescription()" contain - HTML? Is "XMLWorkerHelper.parseToElementList" supposed to be able to convert all the HTML elements your data contains to structured PDF elements? I would imagine that there are limits as to what it can do...? Specifically, is it supposed to be able to handle images?

"test" cannot "include an image". An image element and a text element are two very different types of elements.

PDFs originally could store images either in TIFF format or as scalable vector graphics (PostScript). Whether modern-day PDFs can directly support formats like JPEG or PNG is something that so far I've been too lazy to check, but regardless, to include an image on a PDF page you will need to have it converted (if necessary) to a compatible format, including scaling, if it's appropriate, and then insert it in the document using the proper API method.

Hi Tim M and Tim H,

Within the html I have <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA ...>. I have found two issues:
1) Any tag without an ending (e.g., br, img) causes XMLWorkerHelper to throw an error
2) When I edit the original file in the database and add ending tags (e.g., </br>, </img>) the <img ...</img> is ignored (i.e., all other text before and after the image is in the PDF).

So I need to work out how to:
1) Parse the html when it is read in and add ending tags where they are missing (even though in html they are not required).
2) Display the image.

Your help would be greatly appreciated.

Kind regards,

Glyn

Oh right, an XMLWorkerHelper wants XML, not HTML. Coincidentally there's another thread right now on the forum from somebody who tried using JTidy to convert their HTML to XHTML, which I've done myself, but they have the problem that their "image", which is actually a base-64 version of a QR code, isn't appearing in their PDF. But they aren't using that Summernote software so maybe you'll be more successful. At least JTidy should get you past the problem you have now.

Hi Paul,

I have also found jTidy:

Tidy tidy = new Tidy(); tidy.setXHTML(true); tidy.setQuiet(true); tidy.setShowWarnings(false); org.w3c.dom.Document ppout = tidy.parseDOM(new ByteArrayInputStream(activityDtl.getPPDescription().toString().getBytes()), null); System.out.println("ppout: " + ppout);

However, I need 'ppout' to be a string for:

p6.add(new Chunk("Description:   ", smallBold)); ElementList list1 = XMLWorkerHelper.parseToElementList(ppout, null); for (Element element : list1) {    System.out.println("element1: " + element);    p6.add(element);    preface6.add(p6); }


How do I convert to string, or is this not the correct way?

Can you please provide a link to the other thread please?

Kind regards,

Glyn

Glyndwr Bartlett wrote:How do I convert to string, or is this not the correct way?

Can you please provide a link to the other thread please?

There's no documentation on how Document's toString() method workis. I suppose you could try it and see what happens. The other thread's code uses parseDom() to output to a ByteArrayOutputStream instead, which it's clear what you should do with the output after that method finishes.

CONVERT HTML TO PDF JAVA

Hi Paul,

Mike's code worked a treat, thank you both. My issue is very close to Mike's with displaying the image.

Kind regards,

Glyn

To recap. I now clean the input to remove any MS Word tags that are not consistent with XHTML (e.g., <o:p>) and then convert the input HTML into XHTML. However when I use: ElementList list1 = XMLWorkerHelper.parseToElementList(ppDescription, null); the XMLWorkerHelper ignores the <img .... /> tag. My input is:

<p>Cooking instructions:</p>
<p><img
src="data:image/png;base64,iVBORw0KGgo ...RK5CYII="
alt="" /></p>
<p>Cook the fish.</p>

And:

ElementList list1 = XMLWorkerHelper.parseToElementList(ppDescription, null); System.out.println("list1: " + list1); for (Element element : list1) {    6.add(element); }

Outputs

list1: [[Cooking instructions:], [Cook the fish.]]

So the PDF has:

Cooking instructions: Cook the fish.

Instead of:

Cooking instructions: (an image) Cook the fish.

I have been researching and I have found this, which looks promising:

https://stackoverflow.com/questions/29194405/html-to-pdf-with-base64-images-throws-filenotfoundexception

Unfortunately, due to my limited programming capabilities, I am unable to implement the class:

class Base64ImageProvider extends AbstractImageProvider {


I have extracted this code:

int pos = ppDescription.indexOf("base64,"); if (ppDescription.startsWith("data") && pos > 0) {    byte[] img = Base64.decode(ppDescription.substring(pos + 7));    System.out.println("img: " + img); }else {    System.out.println("img2: " + ppDescription); }

Which displays:

img2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="HTML Tidy for Java (vers. 2009-12-01), see jtidy.sourceforge.net" /> <title></title> </head> <body> <p>Cooking instructions:</p> <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU .... CYII=" alt="" /></p> <p>Cook the fish.</p> </body> </html>


So the "img2" display is triggered.

So is:

class Base64ImageProvider extends AbstractImageProvider {

The correct class to use and if yes how do I implement it? That is pass - ppDescription to it and then include the out put in:

for (Element element : list1) {    p6.add(element);    } cell.addElement(p6);

To include the image in the PDF.


I have tried to share this with the other poster who has a very similar problem; however, their post is no longer available.


Kind regards,

Glyn

I think this is what I need:

https://stackoverflow.com/questions/13843736/parsing-html-to-pdf-with-itext-image-base64/20938015#20938015

However, I am having issues with just getting started with it. For the line:

final HtmlPipelineContext hpc = new HtmlPipelineContext(new CssAppliersImpl(new XMLWorkerFontProvider()));

How do I ignore css please (i.e., I do not have any css input).


Kind regards,

Glyn

What went wrong when you didn't ignore the CSS that you don't have?

Okay, seriously. Seems to me that if you don't have any CSS then this "CSSApplier" thing would probably have no effect. And more seriously, what happened when you tried that code?

Hi Paul,

OK, I have the code with just one error now. The issue is with the last two lines (in particular "parse") because I am using a variable instead of an address to the file:


final InputStream is = new FileInputStream(ppDescription); xmlParser.parse(ppDescription, charset);

The original has:

final InputStream is = new FileInputStream("C:\\test.html");

The error on "parse" is: The method parse(InputStream, Charset) in the type XMLParser is not applicable for the arguments (String, Charset)


The full set of code is:



class ImageTagProcessor extends com.itextpdf.tool.xml.html.Image { private final Logger logger = LoggerFactory.getLogger(getClass()); /* * (non-Javadoc) * * @see com.itextpdf.tool.xml.TagProcessor#endElement(com.itextpdf.tool.xml.Tag, java.util.List, com.itextpdf.text.Document) */ public List<Element> end(final WorkerContext ctx, final Tag tag, final List<Element> currentContent) {    final Map<String, String> attributes = tag.getAttributes();    String src = attributes.get(HTML.Attribute.SRC);    List<Element> elements = new ArrayList<Element>(1);    if (null != src && src.length() > 0) {        Image img = null;        if (src.startsWith("data:image/")) {            final String base64Data = src.substring(src.indexOf(",") + 1);            try {                img = Image.getInstance(Base64.decode(base64Data));            } catch (Exception e) {                if (logger.isLogging(Level.ERROR)) {                    logger.error(String.format(LocaleMessages.getInstance().getMessage(LocaleMessages.HTML_IMG_RETRIEVE_FAIL), src), e);                }            }            if (img != null) {                try {                    final HtmlPipelineContext htmlPipelineContext = getHtmlPipelineContext(ctx);                    elements.add(getCssAppliers().apply(new Chunk((com.itextpdf.text.Image) getCssAppliers().apply(img, tag, htmlPipelineContext), 0, 0, true), tag,                        htmlPipelineContext));                } catch (NoCustomContextException e) {                    throw new RuntimeWorkerException(e);                }            }        }        if (img == null) {            elements = super.end(ctx, tag, currentContent);        }    }    return elements; } } final TagProcessorFactory tagProcessorFactory = Tags.getHtmlTagProcessorFactory();          tagProcessorFactory.removeProcessor(HTML.Tag.IMG);          tagProcessorFactory.addProcessor(new ImageTagProcessor(), HTML.Tag.IMG);          final CssFilesImpl cssFiles = new CssFilesImpl();          cssFiles.add(XMLWorkerHelper.getInstance().getDefaultCSS());          final StyleAttrCSSResolver cssResolver = new StyleAttrCSSResolver(cssFiles);          final HtmlPipelineContext hpc = new HtmlPipelineContext(new CssAppliersImpl());          hpc.setAcceptUnknown(true).autoBookmark(true).setTagFactory(tagProcessorFactory);          final HtmlPipeline htmlPipeline = new HtmlPipeline(hpc, new PdfWriterPipeline(document, pdfWriter));          final Pipeline<?> pipeline = new CssResolverPipeline(cssResolver, htmlPipeline);          final XMLWorker worker = new XMLWorker(pipeline, true);          final Charset charset = Charset.forName("UTF-8");          final XMLParser xmlParser = new XMLParser(true, worker, charset);          final InputStream is = new FileInputStream(ppDescription);          xmlParser.parse(ppDescription, charset);

Glyndwr Bartlett wrote:The error on "parse" is: The method parse(InputStream, Charset) in the type XMLParser is not applicable for the arguments (String, Charset)

Well, yeah. You have a line of code which takes a String and makes an InputStream out of it. Then you have a line of code which wants an InputStream... but you don't give it the InputStream you went to the trouble of making.

Hi Paul,

Sorry about that. I have corrected the lines to:

final InputStream is = new FileInputStream(ppDescription); xmlParser.parse(is, charset);

I now have the following error occurring on the line:

final InputStream is = new FileInputStream(ppDescription);


java.io.FileNotFoundException: <!DOCTYPE html PUBLIC "-\W3C\DTD XHTML 1.0 Strict\EN" "http:\www.w3.org\TR\xhtml1\DTD\xhtml1-strict.dtd"> <html xmlns="http:\www.w3.org\1999\xhtml"> <head> <meta name="generator" content="HTML Tidy for Java (vers. 2009-12-01), see jtidy.sourceforge.net" \> <title><\title> <\head> <body> <p>Test - copy 1a<\p> <\body> <\html> (The filename, directory name, or volume label syntax is incorrect)        at java.io.FileInputStream.open(Native Method)        at java.io.FileInputStream.<init>(FileInputStream.java:131)

How do I correctly pass the string "ppDescription" instead of a FileInputStream please?

Oh. You have a String containing the HTML. Then you don't want a FileInputStream because there's no File anywhere to be seen. Converting the String to an array of bytes and then putting that into a ByteArrayInputStream would be better. (Just like you did in your post from a week ago.)

Unless you can produce an array of bytes in the first place instead of a String. That would simplify the process of making a ByteArrayInputStream.

Hi Paul,

Some success!

final InputStream is = new ByteArrayInputStream (ppDescription.getBytes("UTF-8")); xmlParser.parse(is, charset);

Outputs the text and the image. However, before I celebrate, I need the text and image to appear in the table where I currently have:

p6.add(new Chunk("Description:   ", smallBold)); p6.addAll(xmlParser.parse(is, charset));     p6.add(new Chunk("Description:   ", smallBold));    if(ppDescription == null || ppDescription.isEmpty()){        p6.add("");    }else{        ElementList list1 = XMLWorkerHelper.parseToElementList(ppDescription, null);        System.out.println("list1: " + list1);        for (Element element : list1) {            p6.add(element);        }    } cell.addElement(p6);


Currently it appears above the table.

As per attachment.

So I need to add each element into p6. I have a second field "ppRequirement" that is output to p7 that will have a similar output. How do I achieve this please.