docx、doc 文档浏览器预览方案调研

Alang
1,672 阅读3分钟

前端在实现文件预览的过程中，docx、doc 文件格式的文件预览是一大难题。现有的前端预览效果都比较差，下面将从不同的方案进行调研吗，各有优缺点，可以根据自己的需求去选择，希望了帮助到大家。

方案一：纯前端预览

目前前端预览的组件并不多，比较完善的就是 docx-preview mammoth.js

缺点：

  1. 大文件性能问题、渲染卡顿（致命）

  2. 大部分非微软 office docx 无法分页（致命）

  3. 定制化难，没法手动控制分页

  4. 复杂的文件渲染有问题

实现 demo

docx-preview demo

import * as docx from "docx-preview";
import docTest from "@/assets/ship1.docx?url";
import { useEffect, useRef } from "react";
interface TestProps {}

const Test: React.FC<TestProps> = () => {
  const ref = useRef<any>();

  async function setData() {
    const res = await fetch(docTest, {
      method: "GET",
    });
    docx.renderAsync(res.blob(), ref.current, undefined, {
      breakPages: true,
    });
  }

  useEffect(() => {
    setData();
  }, []);
  return (
    <div className="w-[100vw] h-[100vh] overflow-auto">
      <div ref={ref}></div>
    </div>
  );
};

mammoth.js demo

import mammoth from "mammoth";
import docTest from "@/assets/ship1.docx?url";
import { useEffect, useState } from "react";
interface TestProps {}

const Test: React.FC<TestProps> = () => {
  const [content, setContent] = useState("");

  async function setData() {
    const res = await fetch(docTest, {
      method: "GET",
    });
    mammoth.convertToHtml({ arrayBuffer: res.blob() }).then((res) => {
      console.log(res, "res");
      setContent(res.value);
    });
  }

  useEffect(() => {
    setData();
  }, []);
  return (
    <div className="w-[100vw] h-[100vh] overflow-auto">
      <div dangerouslySetInnerHTML={{ __html: content }}></div>
    </div>
  );
};

export default Test;

解决性能问题：

如果不在乎文档渲染的样式，可以使用 mammoth.js 将 docx 渲染成文本，放在一个 DOM 节点里，就能解决性能问题。

mammoth.extractRawText({path: "path/to/document.docx"})
    .then(function(result){
        var text = result.value; // The raw text
        var messages = result.messages;
    })
    .catch(function(error) {
        console.error(error);
    });

方案二：部署在线服务

部署一个后端预览服务，然后通过 iframe 嵌入到网页中进行预览。

office Online Server

这个方案目前前端预览文件的最优解，支持 pdf、doc、excel、等等。参考桌面版 office,然后通过链接+iframe嵌入页面实现预览。

优点：

  • 可以与现有的本地 Office 环境集成，提供无缝的 Office 功能扩展。
  • 提供广泛的 Office 功能，包括文档编辑、协作、共享和批注等功能。
  • 可在本地服务器上进行部署和管理，提供了更高的数据隐私和安全性。
  • 更接近传统桌面版 Office 的使用体验，用户熟悉 Office 功能。

缺点：

  1. 线上版可能涉及隐私问题，业务侧需要离。

  2. 离线部署比较复杂，需要两台 Windows Server服务器。

  3. 部署、维护成本较高。（重点）

onlyoffice

优点：

  • 提供全面的在线办公套件，包括文档、电子表格和幻灯片编辑等。
  • 具有直观的用户界面和易于使用的协作功能，适合团队协作和远程工作。
  • 可以在各种平台上使用，包括桌面、Web 和移动设备。
  • 提供丰富的扩展和集成选项，可以与其他应用程序和平台无缝集成。

缺点：

  • 不如 OOSS 那么接近传统桌面版 Office 的使用体验。
  • 可能需要更多的网络资源和带宽来支持在线编辑和协作。
  • 需要依赖 OnlyOffice 提供的云服务或自行部署 OnlyOffice 的服务器。

方案三：docx 转 pdf（待验证）

目前前端预览 pdf 的工具比较完善，解决方案方案也比较全，如果能将 docx 转成 pdf 就好处理了。

问题：

  1. 前端浏览器docx2pdf 没有比较好的工具。

  2. 后端处理同样依赖 Windows 服务器，也不好处理。

pdf 预览还不错的库推荐：

总结

  1. 如果只是 docx 小文件预览，且对文件内容的渲染效果要求不高！可以采用第一种方案。这个方案最简单。

  2. 如果要想达到做好的效果，还能支持多种 office 文件格式预览，无疑 office Online Server 方案最佳，不过目前部署成本较高。如果产品定位并不是一定要做文件预览，可以使用其他方案代替。

  3. 如果不想部署 office Online Server， onlyoffice 无疑是不二之选，相比于原生的 office 体验差一些，不过好做功能完善，支持在线协同编辑。

  4. 第三种方案待考察实际可行性，docx 2 pdf 需要时间，pdf 下载也需要时间，实际预览体验效果还有待验证。

avatar
文章
阅读
粉丝