前言
由于在开发中需要适配不同的多端应用,在文件相关处理中也会存在相同的问题,需要将文档转换为不同的格式展示,本节我们主要通过一个小案例实现在java环境下实现 Word2003(doc)转换为HTML用于在线展示。
正文
- 引入word转换为html的pom工具包
<!--word转html https://mvnrepository.com/artifact/org.apache.poi/poi-scratchpad --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-scratchpad</artifactId> <version>3.17</version> </dependency> <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.17</version> </dependency> <!-- https://mvnrepository.com/artifact/fr.opensagres.xdocreport/fr.opensagres.xdocreport.converter.docx.xwpf --> <dependency> <groupId>fr.opensagres.xdocreport</groupId> <artifactId>fr.opensagres.xdocreport.converter.docx.xwpf</artifactId> <version>2.0.1</version> </dependency>
- 后端转换代码
@ApiOperation(value = "word2003转换为html") @PostMapping(value = "word2003ToHtml") public void word2003ToHtml(HttpServletResponse response, @RequestPart("file") MultipartFile file) { try { InputStream inputStream = file.getInputStream(); HWPFDocument wordDocument = new HWPFDocument(inputStream); WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument()); wordToHtmlConverter.processDocument(wordDocument); Document htmlDocument = wordToHtmlConverter.getDocument(); response.reset(); response.setHeader("Content-Disposition", "inline; filename=" + URLEncoder.encode(IdWorker.getIdStr() + ".html", "UTF-8")); ServletOutputStream outputStream = response.getOutputStream(); DOMSource domSource = new DOMSource(htmlDocument); StreamResult streamResult = new StreamResult(outputStream); 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); outputStream.flush(); inputStream.close(); outputStream.close(); } catch (IOException ioException) { ioException.printStackTrace(); } catch (ParserConfigurationException e) { e.printStackTrace(); } catch (TransformerException e) { e.printStackTrace(); } }
- vue前端代码
<template> <div class="container"> <div class="title"> <span>Word2003转换Html示例</span> <el-divider direction="vertical"></el-divider> <router-link to="home"> <span style="font-size: 18px;">退出</span> </router-link> </div> <el-divider>Test Staring</el-divider> <div style="text-align: center;"> <el-upload ref="upload" class="upload-demo" drag :on-success="handlerOnSuccess" action="/fileTransfer/word2003ToHtml"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传doc文件,且不超过50MB</div> </el-upload> </div> </div> </template> <script> export default { name: "Word2003ToHtml", data() { return {} }, methods: { //文件上传成功的回调 handlerOnSuccess(data, file, fileList) { const url = window.URL.createObjectURL(new Blob([data], {type: 'text/html'})); const link = document.createElement('a'); link.href = url; link.setAttribute('download', file.uid+'.html') // 下载文件的名称及文件类型后缀 document.body.appendChild(link) link.click(); document.body.removeChild(link); // 下载完成移除元素 window.URL.revokeObjectURL(url); // 释放掉blob对象 } } } </script> <style scoped lang="scss"> .container { padding: 10px; .title { font-size: 20px; font-weight: bold; } } </style>
- 验证结果
结语
ok,本节内容到这里就结束了,我们下期见。。。。。。