前端——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' }} />

实现效果

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;

实现效果

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;

实现效果