关于javascript:前端word文档实现预览

前言

DOCX

docx 格局其实就是一个 zip 文件，咱们能够拿 winrar 关上 docx 文件，失去一堆的文件，很相似 android 程序或者 win7 桌面窗体的源码，用户在外面能够找到各种配置文件，文本文件和媒体文件。其原理就是相当于用两个文本文档，一个用来放文本信息，另一个用来配置个外面的格局，比方字体，大小等。

MIME 类型

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 状态。

实现成果