Image overlays text when exporting to HTML

Aspose.Words Product Family
1

Hi,

I have a word template that looks like the following:

The data for each image is an ID and during the merge I generate an img tag with a url as the source that uses this ID in the imageFieldMerging method of our implementation of IFieldMergingCallback

String src = "<http://mydomain/file?target=internal&guid=>" + arg0.getFieldValue().toString(); 
DocumentBuilder builder = new DocumentBuilder(arg0.getDocument());
while (builder.moveToMergeField(arg0.getFieldName()))
{
    Shape image = new Shape(arg0.getDocument(), ShapeType.IMAGE);
    image.getImageData().setSourceFullName(src);
    builder.insertNode(image);
}

When generating the document (SaveFormat.HTML) the images overlay the text as per the following screenshot

Is there anyway I can generate HTML using images that are sourced from a URL and keep the formatting as close to the original template as possible (i.e. with no overlaying images)?

Thanks

Iain

2

@iain.lindsay

Thanks for your inquiry. To ensure a timely and accurate response, please attach the following resources here for testing:

  • Your input Word document.
  • Please attach the output Word file that shows the undesired behavior.
  • Please create a standalone console application (source code without compilation errors) that helps us to reproduce your problem on our end and attach it here for testing.

As soon as you get these pieces of information ready, we’ll start investigation into your issue and provide you more information. Thanks for your cooperation.

PS: To attach these resources, please ZIP and upload them.

3

@tahir.manzoor

As requested, please find attached a zip containing the following:

  • Java application (in folder ‘DocGenHtmlImage’) demonstrating the issue - run the DocCreator.java class in the default package… the input template and xml used for the merge are already added as resources… the generated html file will be named output.html and will be saved to c:\temp
  • SampleTemplate.docx - the input template
  • SampleTemplate_ExpectedResult.docx - the layout that I would expect to see
  • SampleTemplate_IncorrectOutput.html - the generated output that shows the overlaying images.

SampleApplicationAndFiles.zip (64.6 KB)

Many thanks for your assistance

Iain

4

@iain.lindsay

Thanks for sharing the detail. We suggest you please upgrade to the latest version of Aspose.Words for Java 17.8 and use following code example to get the desired output. We have attached the output HTML with this post for your kind reference. output.zip (6.7 KB)

HtmlSaveOptions htmlSaveOptions = new HtmlSaveOptions();
htmlSaveOptions.setSaveFormat(SaveFormat.HTML);
Document doc = new Document(MyDir + "SampleTemplate.docx");
DataSet dataSet = new DataSet();
dataSet.readXml(MyDir + "test.xml");
doc.getMailMerge().executeWithRegions(dataSet);
doc.save(MyDir + "output.html", htmlSaveOptions);
5

@tahir.manzoor

Thanks for your response. I have upgraded but I am still getting the same issue.

In the sample you have provided the images are being stored locally alongside the html however in my sample the images are being sourced from the URL passed in with the merge data.

This is important because we are going to be using this html as the body for an email we will be sending so the html needs to have an img tag similar to this:

<img src="http://myabsoluteurl/myimage.jpg"/>

If you have a look at the FieldMergingCallback class, imageFieldMerging method in my sample, you will see how I am attempting to keep the absolute url in place in the generated html

Many thanks for your help

Iain

6

@iain.lindsay

Thanks for your inquiry. We are investigating this issue and will get back to you soon.

7

@iain.lindsay
Thanks for your patience. Please set the shape’s wrap type as inline in imageFieldMerging method to get the desired output. Please check image.setWrapType(WrapType.INLINE) in following method.

public void imageFieldMerging(ImageFieldMergingArgs arg0) throws Exception {
    String fieldValue = arg0.getFieldValue().toString();
    if(!this.\_outputIsHtml){
        if( fieldValue != null && !fieldValue.isEmpty()){
            byte[] fieldBytes = Base64.getDecoder().decode(fieldValue);
            ByteArrayInputStream imageStream = new ByteArrayInputStream(fieldBytes);
            arg0.setImageStream(imageStream);
        }
    }
    else{
        String imgSrc = fieldValue;
        DocumentBuilder db = new DocumentBuilder(arg0.getDocument());
        while(db.moveToMergeField(arg0.getFieldName())){
            Shape image = new Shape(arg0.getDocument(), ShapeType.IMAGE);
            image.setWrapType(WrapType.INLINE);
            image.getImageData().setSourceFullName(imgSrc);
            db.insertNode(image);
        }
    }
}