word 转html回显至富文本编辑器中（渲染页面）——mammoth.js

奔波的鲍滚滚

已于 2023-11-02 16:56:29 修改

阅读量3.2k

点赞数 4

分类专栏： mammoth HTML5 word 转换html 文章标签： html5 javascript jquery

于 2022-07-11 12:02:09 首次发布

本文链接：https://blog.csdn.net/metooyoume/article/details/125718680

版权

HTML5 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

mammoth

1 篇文章 0 订阅

订阅专栏

word 转换html

1 篇文章 0 订阅

订阅专栏

场景：在开发中，前端将本地word导入富文本编辑器中，实现预览、再编辑等功能，我使用的是mammoth插件，并且是基与jquery环境下，后面会放一个demo

注意需要将文件转换.docx文档，本地上传至富文本编辑器中，复杂样式会丢失，目前不花钱的没有找到更好了，如果你们有欢迎留言分享一下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test</title>
  </head>

  <body>
    <div class="container">
      <input id="document" type="file" />
      <div class="row" style="width: 100%;">
        <div class="span8">
          <div id="output" class="well"></div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.Js"></script>
    <!-- 引入本地的jquery库 -->
    <script src="https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js"></script>
    <!-- 引入mammoth库 -->
    <script type="text/javascript">
      document
        .getElementById("document")
        .addEventListener("change", readFileInputEventAsArrayBuffer, false);

      function displayResult(result) {
        console.log(result);
        let html = result.value;
        console.log(html);
        let newHTML = html
          .replace(//g, "")
          .replace("<h1>", '<h1 style="text-align: center;">')
          .replace(/<table>/g, '<table style="border-collapse: collapse;">')
          .replace(/<tr>/g, '<tr style="height: 30px;">')
          .replace(/<td>/g, '<td style="border: 1px solid pink;">')
          .replace(/<p>/g, '<p style="text-indent: 2em;">');
        document.getElementById("output").innerHTML = newHTML;
      }

      function readFileInputEventAsArrayBuffer(event) {
        var file = event.target.files[0];
        // 为文件改名字，此部分可删除，不影响效果
        Object.defineProperty(file, "name", {
          writable: true, //设置属性为可写
        });
        var timestamp = Date.parse(new Date());
        file.name = `file_${timestamp}.docx`;  //在名字中加入时间戳，可以是任意的字符串
        // 为文件改名字结束
        var reader = new FileReader();

        reader.onload = function(loadEvent) {
          var arrayBuffer = loadEvent.target.result; //arrayBuffer
          console.log(arrayBuffer);
          mammoth
            .convertToHtml({ arrayBuffer: arrayBuffer })
            .then(displayResult)
            .done();
        };
        reader.readAsArrayBuffer(file);
      }
    </script>
  </body>
</html>

奔波的鲍滚滚

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
word 转html回显至富文本编辑器中（渲染页面）——mammoth.js

场景：在开发中，前端将本地word导入富文本编辑器中，实现预览、再编辑等功能，我使用的是mammoth插件，并且是基与jquery环境下，后面会放一个demo注意需要将文件转换.docx文档，本地上传至富文本编辑器中，复杂样式会丢失，目前不花钱的没有找到更好了，如果你们有欢迎留言分享一下。...
复制链接

扫一扫