前端——word文档实现预览

前言

DOCX

docx格式其实就是一个zip文件，我们可以拿winrar打开docx文件，得到一堆的文件，很类似android程序或者win7桌面窗体的源码，用户在里面可以找到各种配置文件，文本文件和媒体文件。其原理就是相当于用两个文本文档，一个用来放文本信息，另一个用来配置个里面的格式，比如字体，大小等。

ＭIME类型

application/vnd.openxmlformats-officedocument.wordprocessingml.template

微软在线预览

word、ppt、xls文件实现在线预览的方式最简单可以直接通过调用微软的在线预览功能实现，同时预览的效果是最好的。缺点是： 资源必须是公共可访问的，限不支持内网访问。

实现示例

<iframe src="https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/3.docx" style={{ width: '100%', height: '100vh' }} />

实现效果图

XDOC格式

支持docx 、xls、 pdf等多种格式的预览，在线预览方式时，资源也必须是公共可访问的，对于内网的文件预览，可通过部署私有服务器实现，略麻烦。

在线预览方式

<iframe src="https://view.xdocin.com/view?src=http://mczaiyun.top/ht/3.docx" style={{ width: '100%', height: '100vh' }} />

实现效果

与office在线预览效果相比，缺少了首行缩进、页面间距等效果，整体预览比较接近，同时对于图片的预览，则是新增缩放查看功能。

mammoth

mammoth可用于将.docx文档（比如由Microsoft Word创建的）转换为HTML。Mammoth致力于通过文档中的语义信息生成简洁的HTML，而忽略一些其他细节。例如，Mammoth会把带有“Heading 1”样式的所有段落转换为“h1”元素，而不是试图精确地复制标题的所有样式（字体、字号、颜色等）

支持的特性

当前支持如下特性：

标题。
列表。
自定义从.docx样式到HTML的映射。比如，通过提供合适的样式映射，可以把“WarningHeading”样式转换为“h1.warning”类。
表格。表格自身的样式——比如边框——目前会被忽略，但对文本格式的处理与文档的其余部分一致。
脚注和尾注。
图像。
粗体、斜体、下划线、删除线、上标和下标。
链接。
换行。
文本框。文本框中的内容作为一个单独的段落处理，放在包含该文本框的段落之后。

使用示例

import React, { useEffect } from 'react';
import mammoth from 'mammoth';
import { Card } from 'antd';

const FilePreview = () => {
  const file2ArrayBuffer = (file, callback) => {
    fetch(file, { mode: 'no-cors' })
      .then((response) => response.blob())
      .then((res) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(res);
        reader.onload = function (e) {
          const arrayBuffer = e.target.result;
          callback(arrayBuffer);
        };
      });
  };
  useEffect(() => {
    file2ArrayBuffer('http://mczaiyun.top/ht/3.docx', (arrayBuffer) => {
      mammoth
        .convertToHtml({ arrayBuffer }, { includeDefaultStyleMap: true })
        .then((result) => {
          const docEl = document.createElement('div');
          docEl.className = 'document-container';
          docEl.innerHTML = result.value;
          document.getElementById('docx').innerHTML = docEl.outerHTML;
        })
        .catch((err) => {
          console.log('err', err); // eslint-disable-line
        })
        .done();
    });
  }, []);
  return (
    <Card title="mammoth">
      <div id="docx"></div>
    </Card>
  );
};
export default FilePreview;

实现效果

与office在线预览效果相比，由于支持的特性比较少，所以对于样式复杂的页面，预览效果的出入会比较大，同时图片的样式适配还需要再额外调整。适用于在内网环境下，内容简便的场景下使用。

react-file-viwer

支持格式

Images: png, jpeg, gif, bmp, including 360-degree images
pdf
csv
xslx
docx
Video: mp4, webm
Audio: mp3

使用示例

import React from 'react';
import { Card } from 'antd';
import FileViewer from 'react-file-viewer';

const FilePreview = () => {
  return (
    <Card title="react-file-viewer">
      <FileViewer fileType="docx" filePath={'/docx测试.docx'} />
    </Card>
  );
};
export default FilePreview;

docx使用的也是mammoth，支持转换的docx特性和mammoth相同，react-file-viewer会有一层样式，所以效果上会有一点细微差别。
同时，由于是通过查找元素id渲染转换后的内容，所以页面中若存在多个word预览，除了第一个正常显示外，其他渲染一直是处于loading状态。

实现效果