word转html在前端页面显示 |
您所在的位置：网站首页 › 图片转成html代码 › word转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 pics = wordDocument.getPicturesTable().getAllPictures(); if (pics != null) { for (int i = 0; i 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 org.jsoup jsoup 1.7.3 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 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();以上，亲测，都成功了，而且显示效果非常好。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |