DOC2HTML,转换后图片与文字重叠

我使用的是aspose-words-23.1,在doc转换html时,我发现doc中图片是非嵌入型时,其上或其下的文字在转换后与图片的相对位置会发生改变,有时甚至图片和文字会重叠。晚些时候我再提供示例文档

@arthurjjk 您能否在此处附上您的输入和输出文档以进行测试? 我们将检查该问题并为您提供更多信息。

如果需要在导入 HTML 时保留原始文档布局以供查看,最好使用 HtmlFixed 格式。 在这种情况下,输出将与 MS Word 中的输出完全相同:

Document doc = new Document("C:\\temp\\in.docx");
HtmlFixedSaveOptions opt = new HtmlFixedSaveOptions();
opt.setExportEmbeddedCss(true);
opt.setExportEmbeddedFonts(true);
opt.setExportEmbeddedImages(true);
opt.setExportEmbeddedSvg(true);
doc.save("C:\\Temp\\out.html", opt);

但请注意,HtmlFixed 仅用于查看目的,而不用于编辑或进一步转换。

新建 Microsoft Word 文档.docx (69.2 KB)

您可以使用这个文档尝试转换

@jjqiqi 您能用提供的文档详细说明问题吗? 正如我所看到的,该文档已正确转换为 HTML。 您应该注意到,MS Word 和 HTML 文档的文档对象模型有很大不同。 因此,将一种格式转换为另一种格式后不可能提供 100% 的保真度。
正如我上面提到的,如果需要在转换为 HTML 时保留原始 MS Word 文档布局,您应该使用 HtmlFixed 格式而不是流 HTML。

由于公司信息安全要求,我无法上传相关文件。我不确定您是否能看到下面的图片截图。


问题的关键在于,word中每一段的行高确保文字和图片位置不是重叠的,而转换后的行高导致与图片重叠。我并不想使用HtmlFixed格式,希望保持流布局
如果无法查看,您可以粘贴下列html代码,这是我自己摘取转换后的关键信息手敲的:

<html lang="en-US">
<head></head>
<body style="line-height: 150%; widows:0; orphans:0; font-family: 'Times New Roman'; font-size: 10.5pt" >
<div>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span>
<img width="554" height="423" style="margin-top:2.05pt; margin-left:0.75pt; -aw-left-pos: 0.75pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:2.05pt; -aw-wrap-type:none; position: absolute" />
</span>
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="-aw-import:ignore">&nbsp;</span>
</p>

<p style="margin-top:0pt; margin-bottom: 0pt; line-height:normal;">
<span style="font-family: 宋体;">文字将于图片重叠。</span>
</p>

</div>
</body>
</html>

word文档中:设置5号字体 ———— 转换的html:给body设置了10.5pt字体。 这没问题,是对应的;
word文档中:行高设置为1 ———— 转换的html:给p设置line-height:normal。这也ok。
word文档中:图片宽度为绝对值14.65cm, 高度为绝对值11.19cm,并设置了“浮于文字上方” ———— 转换后的html:给img设置了position:absolute;这也没问题,但是我不理解为什么width:554;height:423;
根据MDN文档说明:1pt = 1/72 * 1in,也就是1/72英寸,而1cm = 0.393 in,那么这里如果要对应body使用的pt单位的话,图片的高度应该是 11.19cm * 0.393in * 72 = 316 pt,根据这个高度,正好不会与文字重叠,能保持与word一样的效果。

@jjqiqi 在您之前附加的 MS Word 文档中,图像大小设置为 277.85pt X 435.35pt:

在输出 HTML 文档中图像被转换为:

<img src="out.002.jpeg" width="581" height="370" alt="" style="margin-top:7.5pt; -aw-left-pos:0pt; -aw-rel-hpos:margin; -aw-rel-vpos:paragraph; -aw-top-pos:7.5pt; -aw-wrap-type:none; position:absolute" />

此处的尺寸以 96DPI 分辨率下的像素为单位指定。 您可以使用 ConvertUtil.pointToPixel 方法将点转换为像素。 正如我所看到的,输出 HTML 文档中的图像大小是正确的。 但正如我在 中提到的,在将其转换为 HTML 后不可能保留原始的 MS Word 文档布局。

可以把你转换代码贴出来参考一下吗?

@jjqiqi 当然,这是我的代码:

Document doc = new Document("C:\\Temp\\in.docx");
HtmlSaveOptions opt = new HtmlSaveOptions();
opt.setPrettyFormat(true);
doc.save("C:\\Temp\\out.html", opt);

我的转换代码,,与你的似乎一致,但就是有问题:

Document doc = new Document(srcFileName);
HtmlSaveOptions options = new HtmlSaveOptions ();
options.setExportShapesAsSvg(true);
options.setUseHighQualityRendering(true);
options.setHtmlVersion(HtmlVersion.HTML_5);
doc.save(fileName, options);

@jjqiqi 您使用的是哪个版本的 Aspose.Words? 您能否将您制作的 HTML 压缩并附在此处供我们参考? 我使用了最新的 24.3 版本的 Aspose.Words for Java 进行测试。

我打包的zip无法上传,富文本编辑器一直提示我上传失败

test (2).docx (3.2 KB)

我将html文件改成了docx格式以成功上传,请改为.html格式打开

Aspose.Words for Java使用的版本是23.1

@jjqiqi 您能否在此处附上您的输入 DOCX 文档以进行测试? 我看起来您正在使用另一个文档作为输入,而不是本主题前面所附的文档。 另外,据我所知,您正在使用旧的 23.1 版本的 Aspose.Words。 请尝试使用最新的 24.2 版本,并告知我们问题是否仍然存在。

我不知道你们的富文本编辑器上传附件功能是有什么bug,我上传docx,或者zip包都一直失败

@jjqiqi 您已成功上传上面带有 DOCX 扩展名的文件。 另外,我已经在我这边进行了测试,可以上传 DOCX 和 ZIP 文件。 如果您仍然遇到困难,可以将文件上传到谷歌驱动器并在此处共享该文件的链接。