精华内容
下载资源
问答
  • 前端word转html
    千次阅读
    2021-02-09 18:21:28

    相信有些小伙伴会遇到这样的场景,那就是想要在前端网页上面预览word文件,但是直接预览word文件相对来说还是体验不是很好,再加上如果还想直接在文件上面做一些编辑改变的话,一般前端的富文本编辑器编辑的都是Html文件。所以这个时候我们可以考虑将word转成Html,之后预览和编辑都变得非常简单。之后还需要将文件转成pdf之类的文件也非常方便。
    话不多说,下面给大家分享个非常简单好用的方案,并且下面会给出个实际实现的案例。
    我们借助的是poi工具,它的功能非常强大,贴出他的github地址:https://github.com/apache/poi,如果想获取更多信息可以去看看。
    我这边用到的相关工具引入:
     

            <dependency>
                <groupId>org.apache.poi</groupId>
                <artifactId>poi</artifactId>
                <version>3.17</version>
            </dependency>
            <dependency>
                <groupId>org.apache.poi</groupId>
                <artifactId>poi-scratchpad</artifactId>
                <version>3.17</version>
            </dependency>
            <dependency>
                <groupId>org.apache.poi</groupId>
                <artifactId>poi-ooxml</artifactId>
                <version>3.17</version>
            </dependency>
            <dependency>
                <groupId>fr.opensagres.xdocreport</groupId>
                <artifactId>fr.opensagres.poi.xwpf.converter.xhtml</artifactId>
                <version>2.0.1</version>
            </dependency>
            <dependency>
                <groupId>org.apache.poi</groupId>
                <artifactId>poi-ooxml-schemas</artifactId>
                <version>3.17</version>
            </dependency>
            <dependency>
                <groupId>org.apache.poi</groupId>
                <artifactId>ooxml-schemas</artifactId>
                <version>1.3</version>
            </dependency>

    现在我们遇到的word文件有两种,一种是以docx文件结尾的,另一种是doc文件结尾的。两种文件在内部编码是有一些差异的,doc是03版本或更早,docx只有07版之后才有的格式。

    当然它们转Html的方法也稍有不同,下面分别给出demo,两个方案的测试数据也有不同,各位根据自己的需要调整就行。

    public static String docToHtml() throws Exception {
            HWPFDocument hwpfDocument = new HWPFDocument(new FileInputStream("E:\\****.doc"));
            Document newDocument = XMLHelper.getDocumentBuilderFactory().newDocumentBuilder().newDocument();
            WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(newDocument);
            wordToHtmlConverter.processDocument(hwpfDocument);
            Transformer transformer = TransformerFactory.newInstance()
                    .newTransformer();
            //指定Transformer在输出结果树时是否可以添加额外的空格
            transformer.setOutputProperty(OutputKeys.INDENT, "yes");
            //指定输出编码
            transformer.setOutputProperty(OutputKeys.ENCODING, "utf-8");
            transformer.setOutputProperty(OutputKeys.METHOD, "html");
            //这里是希望将转换后的流最终输出到字符串进行返回, 如果你希望直接输出文件, 你可以创建一个文件流放进下面的参数
            StringWriter stringWriter = new StringWriter();
            transformer.transform(new DOMSource(wordToHtmlConverter.getDocument()), new StreamResult(stringWriter));
            String html = stringWriter.toString();
            return html;
        }
    private static String docxToHtml(byte[] fileType) throws IOException {
            XWPFDocument document = new XWPFDocument(new ByteArrayInputStream(fileType));
            StringWriter stringWriter = new StringWriter();
            XHTMLConverter xhtmlConverter = (XHTMLConverter) XHTMLConverter.getInstance();
            XHTMLOptions options = XHTMLOptions.getDefault();
            xhtmlConverter.convert(document, stringWriter,options);
            String html = new String (stringWriter.toString().getBytes("utf-8"),"utf-8");
            return html;
     }

    转换成html就可以快乐地使用啦~

    更多相关内容
  • 使用前提是:电脑已经安装了word,这里用到的是word组件Word.Application。 代码如下:<HTML> <HEAD> <TITLE>WalkingPoison’s Word-to-HTML sample</TITLE> [removed] function saveword() {...
  • word文档转换成html格式 在 word 文档里编辑好对应的文档(比如文字颜色,大小,对齐方式)复制对应的文档,打开链接:https://open-demo.modstart.com/ueditor-plus/dist-min/复制对应的文档,然后到ueditor-plus...

    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前端页面显示

    千次阅读 2020-08-26 14:54:55
    word转HTML时图片的处理我分为两种解决方案:1、图片保存在本地文件夹。2、转为base64。 以下分doc与docx,不同格式处理方法略有不同。 前端我用的是vue,直接通过“v-html”显示html文本 一、图片保存本地 坑1 ...

    近日碰到该需求,遇坑记录于此,望能帮助到其他伙伴。
    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();
    

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

    展开全文
  • word文档转html在线预览Demo
  • html转word html转换成word文档 项目简介 最近一直在做关于前端富文本生成的html代码转换成word的需求,对各种工具进行了尝试,对效果都不是很满意,最后从茫茫大海中找到一个非常好的工具,顾分享出来 主要转换方式...
  • vue word 转换html渲染页面(mammoth)

    千次阅读 2021-11-29 15:07:47
    用到的插件mammoth 安装 npm install --save mammoth tip:只能预览.docx文件 (只能转换.docx文档,转换...div id="wordView" v-html="wordText" /> </div> </template> <script> // docx文

    用到的插件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

    展开全文
  • word文档转换成html文档-保留word中的图片样式等信息。还原度99%。
  • word文档前端预览

    2020-06-04 17:39:31
    本资源,通过前端引入js插件,可以进行本地word文档的预览,并且也通过服务器加载文档进行word文档预览
  • java实现HTML转Word

    2022-03-28 22:31:53
    java实现HTML转Word
  • 主要为大家详细介绍了java使用POI实现htmlword的相互转换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • word文档转html文档

    千次阅读 2018-05-27 16:07:58
    一般word文件后缀有doc、docx两...对于这两种格式的word转换成html需要使用不同的方法。对于docx格式的文档使用xdocreport进行转换。依赖如下:&lt;dependency&gt; &lt;groupId&gt;fr.opensagres.x...
  • word转html (doc,docx)

    2022-04-14 11:40:35
    wordhtml文件,访问方式http://127.0.0.1:8133/hwb/word/wordtohtml 参数 sourceFile:C:/Users/ceshi.docx outFile:C:/Users//cs.html picSrc:C:/Users/ 图片存储位置 htmlImgAction:C:/Users/Desktop/ html中路...
  • html+js实现,无需服务端。 可用于管理后台简单的批量导入数据到后台。 支持将excel表格中的数据直接转化成json格式化
  • 前端html生成word

    2022-06-07 15:30:51
    前端html生成word
  • html转word

    2016-03-13 22:38:17
    htmlword,效果还是可以的。
  • word转化为html操作步骤

    千次阅读 2022-05-11 14:20:59
    安装Typora软件 ... 2、安装完毕后,打开Typora(软件打开后,操作界面如下图)...将word内容复制过来之后,word的部分内容或排版会出现错乱,需要根据出错的内容,在word中进行修改,修改完毕后,再重新进行转换。 .
  • ![图片说明](https://img-ask.csdn.net/upload/201912/13/1576199570_313087.png) java代码如何将word文件转换html(完美保留格式)如图格式
  • js将HTML导出生成word文档,方式简单,不需要修改浏览器配置,引入两个js就可以解决该问题,亲测有效
  • 自带插件 ,代码齐全, 可直接导出word,亲测有效,放心下载!
  • android 实现Word转HTML源码
  • // 使用我们刚刚准备好的html模板并创建Blob对象 let blob = new Blob([html],{type:"application/msword;charset=utf-8"}); // 调用FileSaver.saveAs导出下载word saveAs(blob, "导出word的名字.doc")...
  • vue前端html导出word文档

    千次阅读 2021-06-09 11:09:54
    标签:ext大小标签引入torobjectteeattribute解决1、index.html文件内引入1 scriptsrc="js/html-docx.js">...2、在导出页面加入方法1 //导出 word 文档2 exportDocx() {3 //克隆报告HTML4 let contentDoc...
  • html网页上的内容导出为word文件
  • 用docxtemplater插件,前端实现html导出word文档(可导出文字、表格、图片) 官方文档https://docxtemplater.com/ 参考地址https://www.cnblogs.com/zmh-980509/p/15480113.html 一、下载插件并引入 // 下载...
  • xdocreport能解析word转html,但解析出来的是基于word的整套html,往往我们的需求是 按照段落顺序分块解析成一小块的html,并保存数据库,方便我们解决业务上的各种需求。 解决方案: 修改xdocreport源码,按照段落...
  • 本文实例讲述了JS实现获取word文档内容并输出显示到html页面。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<...
  • word界面web前端

    2019-04-10 19:39:03
    前端界面
  • 所以考虑是不是可以把word转html,这样放入编辑器中打开就没问题了把。2.准备麻烦的又来了,UEditor1.4之后才支持简便的二次开发扩展,但项目使用了老版本的UEditor,全面替换吧肯定又是一堆坑,没办法就只能改源....
  • Java怎么将html转换成word

    千次阅读 2021-03-25 12:00:37
    Java如何将html转换成word1、有一个比较复杂的页面,能不能直接word?因为页面涉及到一些样式、图片啥的2、如果不能直接的话,能不能提取html中table里面的数据然后word里面的表格?我分段来生成这个word...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,227
精华内容 15,290
关键字:

前端word转html