做管理系统、在线教育或者资料站的人，基本都会碰到同一个需求：用户上传了 Word、Excel 或者 PDF，希望直接在网页里就能看，不用下载到本地再打开。这件事听着简单，做起来全是硬骨头。Word 的 docx 本质上是个压缩包，里面塞着 XML 和零散的资源文件，要解析出段落、样式、图片、表格；Excel 的公式、单元格格式、多个工作表也得处理；PDF 更麻烦，字体、矢量图形、分页一层套一层。这次整理了 4 款开源免费、可商用的文档处理库，把这些活都接了过去。
Word 在线预览有两条路
DOCX-Preview 走的是还原派，把 docx 渲染成接近原版的样式，段落、标题、加粗斜体、表格、图片、页眉页脚、分页都能保留，输出的是普通 DOM，可以自己叠样式做定宽和滚动。Mammoth.js 走的是净化派，不追求像素级还原，而是把 docx 转成语义干净的 HTML，标题变成标准标题标签、列表变成列表标签、加粗变成强调标签，样式交给你自己的 CSS 控制。如果是要给用户看原件、讲究版式，用前者；如果是要把 Word 内容存进数据库、发成文章或者导入富文本编辑器，用后者，转出来的 HTML 很规整，后续处理省事得多。
Excel 的读写交给它
SheetJS 是前端表格处理里用得最多的一款，能读能写 xlsx、xls 和 csv，支持多个工作表、单元格公式、日期格式、合并单元格，也能把页面上的数据直接导出成 Excel 文件。做导入导出功能几乎绕不开它，成绩表、对账单、库存表、报名名单这类需求，接上就能用。它最大的好处是纯前端运行，用户的文件不用传到服务器，隐私和服务器成本都省了，导出也不用等后端生成。社区版覆盖了绝大多数场景，只有遇到特别复杂的图表和宏可能不够用。
PDF 渲染单独说一句
PDF.js 是 Mozilla 官方维护的渲染引擎，也是 Firefox 内置阅读器的核心，能把 PDF 解析成页面渲染到画布上，支持翻页、缩放、文本层选择和复制、跳转目录，包里附带了阅读器样式和视图组件，照着搭一个自己的 PDF 阅读页就能跑。它有一个新手最容易卡住的点：必须把工作线程文件放到同目录下，路径不对会直接报错或者白屏。另外它的产物体积不算小，如果只是简单显示，可以考虑先用浏览器自带的方式预览，需要精细控制再上它。
实际接入要注意的坑
一是格式边界。DOCX-Preview 和 Mammoth 处理的是新版 docx，老的 doc 文件不支持，用户传上来的旧文件需要先做转换或者给个提示。二是移动端渲染。文档在手机小屏幕上直接按原版式渲染会挤成一团，建议做响应式缩放，或者干脆在移动端只提供下载。三是性能。大文件解析要花时间，别在主线程硬扛，给用户一个加载中的反馈，否则页面看起来像卡死了。四是安全。解析用户上传的文件要注意体积上限和异常文件，别让一个畸形文件把页面拖垮。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和未压缩版两种文件，正式项目引压缩版，调试的时候看未压缩版。四款库互相独立，都用 script 标签直接引入就能拿到全局对象，也支持模块化引入，不需要后端服务配合。每个目录都带上了官方说明文档和许可文件，方便你核对用法和授权。选型上按格式挑就行，Word 预览用 DOCX-Preview，Word 转内容用 Mammoth，表格读写用 SheetJS，PDF 用 PDF.js，需要的话可以几款一起上。
文档预览这类功能属于典型的看起来不起眼、实际很能加分的一环。用户传完文件不用下载就能看，第一印象就不一样；导入导出做顺了，日常办公效率能直接上一个台阶。上手建议是先跑通一个格式，把文件传给页面、渲染出来看清楚，再往业务里接。这四款全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和数据类合集，需要的可以先收藏。
暂无评论内容