使用Aspose.Words在浏览器渲染Word(.doc)时布局不符的技术问询

问题根源 #

1. HTML_FIXED资源依赖未处理：Aspose.Words生成HTML_FIXED格式时，会同步生成配套的CSS文件、图片资源文件夹（命名规则通常是文件名_files），这些资源是维持Word原布局的核心。当前代码只读取了HTML文件内容就删除所有生成文件，导致样式和资源丢失，只剩纯HTML结构。
2. 前端展示容器错误：使用<textarea>标签展示HTML内容，该标签仅能显示纯文本，不会解析HTML标签和样式，自然无法呈现布局。

修复步骤 #

1. 后端调整：保留并配置HTML_FIXED的配套资源 #

修改Service层代码，通过HtmlFixedSaveOptions指定资源保存路径和前端可访问的资源引用地址，同时保留生成的所有资源文件：

public String viewExample(Long code, Long version) {
    DownloadResponse response = getResponseExample(code, version);
    com.aspose.words.Document document = new com.aspose.words.Document(response.getContent());
    
    // 配置HTML_FIXED保存参数
    HtmlFixedSaveOptions saveOptions = new HtmlFixedSaveOptions();
    String resourceDirName = response.getFileName() + "_files";
    // 资源文件的物理保存路径（需确保该目录是项目静态资源目录或可被前端访问）
    String resourcePhysicalPath = fileServerPath + SEPARATOR + resourceDirName;
    // 前端访问资源的URL前缀（根据你的项目静态资源路径调整）
    String resourceUrlPrefix = url_raiz + "/static/" + resourceDirName;
    
    saveOptions.setResourcesFolder(resourcePhysicalPath);
    saveOptions.setResourcesFolderAlias(resourceUrlPrefix);
    
    String htmlFilePath = fileServerPath + SEPARATOR + response.getFileName() + ".html";
    document.save(htmlFilePath, saveOptions);
    
    // 返回HTML文件的访问URL，而非纯字符串内容
    return url_raiz + "/static/" + response.getFileName() + ".html";
}

2. 前端调整：替换为可渲染HTML的容器 #

将<textarea>替换为<iframe>或直接用<div>渲染HTML内容：

• 方案一：用iframe加载HTML文件（推荐，资源路径更易维护）

<div class="row">
  <div class="col mb-2">
    <iframe src="${exHtmlUrl}" width="100%" height="600px" frameborder="0"></iframe>
  </div>
</div>

• 方案二：直接渲染HTML字符串（需确保资源引用路径正确）

<div class="row">
  <div class="col mb-2" th:utext="${exHtmlFile}"></div>
</div>

注意：使用th:utext而非th:text，前者会直接解析HTML标签，后者会转义标签为纯文本。

3. 额外优化：修复HTML读取的编码与性能问题 #

如果仍需读取HTML字符串返回，替换原字符串拼接方式为StringBuilder，避免编码错误和性能损耗：

StringBuilder htmlBuilder = new StringBuilder();
String linha;
while ((linha = entradaString.readLine()) != null) {
    htmlBuilder.append(linha);
}
String html = htmlBuilder.toString();

内容的提问来源于stack exchange，提问作者Luize Casaretti