word文档转换成html格式
word文档转换成html格式

1. 在 word 文档里编辑好对应的文档（比如文字颜色，大小，对齐方式）

2. 复制对应的文档，打开链接：https://open-demo.modstart.com/ueditor-plus/dist-min/

3. 复制对应的文档，然后到ueditor-plus转换html
   

4. 操作如下，点击左上角的html按钮，这样就会把文档内容转换为html格式的文档
   
   5.复制对应的html，完成协议内容编辑

以上内容为普通文档转换为html的方法，大家可以借鉴一下，

如果有用，

记得收藏哦，记得收藏哦，记得收藏哦，记得收藏哦，记得收藏哦，记得收藏哦，记得收藏哦，记得收藏哦

记得点赞哦，记得点赞哦，记得点赞哦，记得点赞哦，记得点赞哦，记得点赞哦，记得点赞哦，记得点赞哦

近日碰到该需求，遇坑记录于此，望能帮助到其他伙伴。
word转HTML时图片的处理我分为两种解决方案：1、图片保存在本地文件夹。2、转为base64。
以下分doc与docx，不同格式处理方法略有不同。
前端我用的是vue，直接通过“v-html”显示html文本

一、图片保存本地

坑1

大多数浏览器都不能以形如（file:///C://xxx）的形式直接访问本地文件，故需要在后台配置文件中配置虚拟路径映射到本地盘符。

@Configuration
public class ResourcesConfig implements WebMvcConfigurer
{
    @Autowired
    private RepeatSubmitInterceptor repeatSubmitInterceptor;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry)
    {
        /** 本地文件上传路径 */
        //访问时：http://localhost:8080/Constants.RESOURCE_PREFIX/xxx
        //RuoYiConfig.getProfile()保存的本地文件夹路径
        registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**").addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");
}

1、doc

// 实例化WordToHtmlConverter，为图片等资源文件做准备
				WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(
						DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument());
				wordToHtmlConverter.setPicturesManager(new PicturesManager() {
					public String savePicture(byte[] content, PictureType pictureType, String suggestedName,
							float widthInches, float heightInches) {
						return suggestedName;
					}
				});
				// doc
				HWPFDocument wordDocument = new HWPFDocument(entity.getContent());
				wordToHtmlConverter.processDocument(wordDocument);
				// 处理图片，会在同目录下生成并保存图片
				List<Picture> pics = wordDocument.getPicturesTable().getAllPictures();
				if (pics != null) {
					for (int i = 0; i < pics.size(); i++) {
						Picture pic = (Picture) pics.get(i);
						try {
							String a = RuoYiConfig.getProfile()+ "/" + pic.suggestFullFileName();
							pic.writeImageContent(new FileOutputStream(RuoYiConfig.getProfile()+ "/" + pic.suggestFullFileName()));
						} catch (FileNotFoundException e) {
							e.printStackTrace();
						}
					}
				}

				Document htmlDocument = wordToHtmlConverter.getDocument();
				ByteArrayOutputStream outStream = new ByteArrayOutputStream();
				DOMSource domSource = new DOMSource(htmlDocument);
				StreamResult streamResult = new StreamResult(outStream);
				TransformerFactory tf = TransformerFactory.newInstance();
				Transformer serializer = tf.newTransformer();
				serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");// 编码格式
				serializer.setOutputProperty(OutputKeys.INDENT, "yes");// 是否用空白分割
				serializer.setOutputProperty(OutputKeys.METHOD, "html");// 输出类型
				serializer.transform(domSource, streamResult);
				outStream.close();
				content = new String(outStream.toByteArray());

2、 docx

// docx to html
				// 1) 加载XWPFDocument及文件
				XWPFDocument document = new XWPFDocument(entity.getContent());
				document.createNumbering();
				// 2) 实例化XHTML内容(这里将会把图片等文件放到同级目录下)
				File imageFolderFile = new File(RuoYiConfig.getProfile());
				XHTMLOptions options = XHTMLOptions.create();
				options.setExtractor(new FileImageExtractor(imageFolderFile));
				options.URIResolver(new BasicURIResolver("http://localhost:8080/profile"));
				options.setIgnoreStylesIfUnused(false);
				options.setFragment(true);
				// 3) 将XWPFDocument转成XHTML并生成文件 --> 我此时不想让它生成文件,所以我注释掉了,按需求定

				ByteArrayOutputStream baos = new ByteArrayOutputStream();
				XHTMLConverter.getInstance().convert(document, baos, options);
				content = baos.toString();
				content = Pattern.compile("width:\\d*[.]\\d*pt;").matcher(content).replaceAll("592.0pt;");
				content = Pattern.compile("width:595.0pt;").matcher(content).replaceAll("");
				content = Pattern.compile("width:593.0pt;").matcher(content).replaceAll("");
				content = Pattern.compile("margin-left:\\d*[.]\\d*pt;").matcher(content).replaceAll("");
				content = Pattern.compile("margin-right:\\d*[.]\\d*pt;").matcher(content).replaceAll("");

类：

import org.apache.poi.hwpf.HWPFDocument;
import org.apache.poi.hwpf.converter.PicturesManager;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.usermodel.PictureType;

二、图片转为base64

1、doc

HWPFDocument wordDocument = new HWPFDocument(entity.getContent());
				WordToHtmlConverter converter = new WordToHtmlConverter(
						DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument());
				// 对HWPFDocument进行转换
				converter.setPicturesManager(new PicturesManager() {
					@Override
					public String savePicture(byte[] content, PictureType pictureType, String suggestedName,
							float widthInches, float heightInches) {
						String type = pictureType.name();
						final Base64.Encoder encoder = Base64.getEncoder();
						return "data:image/" + type + ";base64," + new String(encoder.encodeToString(content));
					}
				});
				converter.processDocument(wordDocument);

				Document htmlDocument = converter.getDocument();
				ByteArrayOutputStream outStream = new ByteArrayOutputStream();
				DOMSource domSource = new DOMSource(htmlDocument);
				StreamResult streamResult = new StreamResult(outStream);
				TransformerFactory tf = TransformerFactory.newInstance();
				Transformer serializer = tf.newTransformer();
				serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");// 编码格式
				serializer.setOutputProperty(OutputKeys.INDENT, "yes");// 是否用空白分割
				serializer.setOutputProperty(OutputKeys.METHOD, "html");// 输出类型
				serializer.transform(domSource, streamResult);
				outStream.close();
				content = new String(outStream.toByteArray());

2、docx

依赖：

java <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency>

import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.apache.poi.xwpf.usermodel.XWPFPictureData;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

// docx to html
				// 1) 加载XWPFDocument及文件
				XWPFDocument document = new XWPFDocument(entity.getContent());
				List<XWPFPictureData> list = document.getAllPictures();

	            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
	            XHTMLConverter.getInstance().convert(document, outputStream, null);

	            String s = new String(outputStream.toByteArray());
	            org.jsoup.nodes.Document doc = Jsoup.parse(s);
	            Elements elements = doc.getElementsByTag("img");
	            if (elements != null && elements.size() > 0 && list != null){
	                for(Element element : elements){
	                    String src = element.attr("src");
	                    for (XWPFPictureData data: list){
	                        if (src.contains(data.getFileName())){
	                            String type = src.substring(src.lastIndexOf(".") + 1);
	                            final Base64.Encoder encoder = Base64.getEncoder();
	                            String base64 = "data:image/" + type + ";base64," + new String(encoder.encodeToString(data.getData()));
	                            element.attr("src", base64);
	                            break;
	                        }
	                    }
	                }
	            }
	            document.close();
	            content = doc.toString();

以上，亲测，都成功了，而且显示效果非常好。

用到的插件mammoth

安装

npm install --save mammoth

tip：只能预览.docx文件

(只能转换.docx文档，转换过程中复杂样式被忽，居中、首行缩进等)

完整代码

<template>
  <div class="word-wrap">
    <div id="wordView" v-html="wordText" />
  </div>
</template>

<script>
// docx文档预览(只能转换.docx文档，转换过程中复杂样式被忽，居中、首行缩进等)
import mammoth from "mammoth";
export default {
  data() {
    return {
      wordText: "",
      wordURL: 'vue-mobile/media/word.docx'//文件地址
    };
  },
  created() {
    this.getWordText();
  },
  methods: {
    getWordText() {
      const xhr = new XMLHttpRequest();
      xhr.open("get", this.wordURL, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = () => {
        if (xhr.status == 200) {
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
            this.$nextTick(() => {
              this.wordText = resultObject.value;
            });
          });
        }
      };
      xhr.send();
    }
  },
};
</script>

<style lang="less">
.word-wrap {
  padding: 15px;
  img {
    width: 100%;
  }
}
</style>

改颜色 可以改标签

原文章 ：https://www.cnblogs.com/zjianfei/p/14862952.html