react-mammoth

react-mammoth是为了更方便的在react组件中在线预览docx文档, 它基于mammoth.js,可以直接在react组件中使用。在内部下载了mammoth.browser.min.js,并且为mammoth库做了修改，添加了基础的字体颜色，大小，段落背景颜色等样式,以及对word中的图片，表格做了默认配置。

Installation

yarn add react-mammoth
npm i react-mammoth

Using in React

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Mammoth,{mammoth} from "react-mammoth";
const App = () => {
  const [file, setFile] = useState(null);
  const onChange = (e) => {
    const file = e.target.files[0];
    setFile(file);
  };
  return (
    <div>
      <Mammoth 
      file={file} //接收File类型文件或者Blob类型文件，组件内部会自动处理word文件
      />
      <input type="file" onChange={onChange}></input>
    </div>
  );
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

Properties

所有的props参数.

• file 接收File类型文件或者Blob类型文件，组件内部会自动处理word文件，限制.doc或docx文件其他文件会保错
• html 直接传递给dangerouslySetInnerHTML._html属性，可以通过组件内部export的mammoth,手动去控制每一个细节.优先级高于file参数
• options mammoth.convertToHtml({ arrayBuffer: file }, options)方法的options配置项，默认为

    let transformParagraph = function (element) {
      // 单行占位，不分页时换行占位其实意义不大
      if (element.children.length === 0) {
        element.children.push({
          type: "run",
          children: [{ type: "text", value: "[占位符]" }],
        });
        element.styleName = "blank-line";
        return element;
      }
      return element;
    };

    let options = {
      transformDocument: mammoth.transforms.paragraph(transformParagraph),
      styleMap: ["p[style-name='blank-line'] => p.blank-line:fresh"],
      convertImage: mammoth.images.imgElement(function (image) {
        // web支持显示的图片类型
        let imgTypeAll = {
          "image/png": true,
          "image/gif": true,
          "image/jpeg": true,
          "image/svg+xml": true,
          "image/tiff": true,
        };
        return image.read("base64").then(function (imageBuffer) {
          if (!imgTypeAll[image.contentType]) {
            // image.style += 'border:1px solid #eee;';
            return "";
          }
          return {
            src: "data:" + image.contentType + ";base64," + imageBuffer,
          };
        });
      }),
      includeEmbeddedStyleMap: true,
      includeDefaultStyleMap: true,
    };

设置options会在后面追加属性

Export

• Component export default ,你可以通过一下方式来使用

 import Mammoth from "react-mammoth";

• mammoth export default ,他提供了mammoth中所有属性， 你可以通过一下方式来使用,详情可以参考mammoth文档

 import {mammoth} from "react-mammoth";
 export default ()=>{
  const [html,useHtml] = useState('')
  useEffect(()=>{
    mammoth
      .convertToHtml({ arrayBuffer: file }, options)
      .then(function (result) {
        useHtml(result.value);
      })
  },[])
  return <Mammoth 
      html = {html}
      />
 }

How to custom mammoth

作者目前也正在看，学习详情可以看以下文档Custom Mammoth.

Suggestions for updates or feedback on issues

email [e-mail]