Word、PDF 文件在线预览是怎么实现的呀？快被折腾疯了

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 415 天前的主题，其中的信息可能已经有所发展或是发生改变。

要实现 word 、pdf 在线预览。

目前实现思路是 PDF 转图片，然后通过图片实现预览。

Word 的话，先转 PDF ，然后 PDF 再转图片。

感觉超级繁琐啊。

刚弄完 PDF 转图片，效果勉强能看，有的图片会莫名其妙地丢部分文字，报错：

Can't find CID font "????". Attempting to substitute CID font /Adobe-GB1 for /????, see doc/Use.htm#CIDFontSubstitution. Loading a TT font from /usr/share/ghostscript/9.53.3/Resource/CIDFSubst/DroidSansFallback.ttf to emulate a CID font Adobe-GB1 ... Done.

猜测是字体丢失导致的。

看别人做的都挺好的，咋自己实现起来这么难呢。

有没有做过的大佬，一般是咋实现的。

word 转 PDF 咋转，现在还茫然中。

PDF

word

转

45 条回复 • 2024-09-14 11:44:39 +08:00

dode

2024-09-11 11:09:52 +08:00

https://github.com/mozilla/pdf.js#online-demo

horizon

2024-09-11 11:10:14 +08:00

https://github.com/react-pdf-viewer/react-pdf-viewer

mesh

2024-09-11 11:10:15 +08:00

pdf 预览直接去找个库不就行了

horizon

2024-09-11 11:11:32 +08:00

word 的搜一下，例如
https://juejin.cn/post/6844903561017425927

jatesun

2024-09-11 11:11:32 +08:00

直接 onlyoffice 不就好了。

jorneyr

2024-09-11 11:14:01 +08:00

使用 LibreOffice 把 Word, PPT 等转为 PDF ，然后 pdf.js 在线显示 PDF 。

wusheng0

2024-09-11 11:25:26 +08:00

pdf 看需求吧，一般浏览器对这个支持都挺好，直接 iframe 加载就行
https://juejin.cn/post/7117521871221817375#heading-4

xR13zp0h67njQr2S

2024-09-11 11:30:23 +08:00

你需要的是 wps

ufan0

2024-09-11 11:45:36 +08:00

接入 WPS SDK 吧

XG9H3BN7CWMMmnjw

2024-09-11 11:47:50 +08:00

onlyoffice

han3sui

2024-09-11 11:49:02 +08:00

onlyoffice 可以的

dumbass

2024-09-11 11:49:54 +08:00

pdf 简单，iframe 加载，浏览器自带阅读器

Ritter

2024-09-11 11:50:45 +08:00

onlyoffice 就是麻烦有钞能力当我没说

taozywu

2024-09-11 11:51:50 +08:00

其实有很多办法了
1. 可以用第三方 api 搜下
2. 可以用 pdf.js
3. 可以将 word 、pdf 统一转 html 可以使用 pdf2htmlEX

crissx

2024-09-11 11:53:14 +08:00

java 开源后端 kkfileview
第三方 Office Web 365, 这个第三方是我见过效果最好的,有一定费用

hoopz

2024-09-11 13:38:41 +08:00

字体那个不大好弄。如果 pdf 内嵌了字体，但是内嵌的有问题的话，react-pdf-viewer 显示出来的会丢字。直接用 chrome 打开 pdf 的话，感觉 chrome 会使用默认字体（？），内容不会少，但是格式可能会有问题。

snowlee

2024-09-11 13:44:36 +08:00

阿里云 oss imm https://help.aliyun.com/zh/imm/product-overview/what-is-imm?spm=5176.166693.J_5253785160.4.6a3931a6XMsnUg

vikaptain

2024-09-11 13:52:20 +08:00

pdf: 如果什么要求都没有,直接开个新标签页，如果要在嵌在自己的页面中有 pdf.js 库可以用
word：如果不想转 pdf ，只是预览的话可以调用微软的 Office Web Viewer(要求一: 必须是互联网可以公开访问, 要求二: 必须是域名且必须是默认端口)

dq19871123

2024-09-11 14:30:34 +08:00

微软有一套 Office Web Apps Server 解决方案，可以实现 Office 文档的在线预览和编辑，把 api 返回的 iframe 加到网页中就行

rockxsj

2024-09-11 14:38:40 +08:00

参考下 alist 的实现啊客户端集成一个 js 就行

shadowyue

2024-09-11 14:48:08 +08:00

如果你不说预算，我建议你直接使用微软的 onedrive 网盘，
里边的文件都能自动在线预览，简单又省心。
企业版应该还能做权限控制。

其它的方案，就像你说的，
work 转 pdf ，pdf 转图片，这个是我目前体验过的最稳定的方案。

楼上其它的预览方案，如果是页面直接加载 pdf 文件预览，核心都是依赖 pdf.js 这个库。
这个方案的有几个不稳定因素，一个是耗费资源比较多，加载也慢。
因为原理是在前端页面用 canvas 直接把 pdf 内容画出来。
如果你 pdf 文件比较大就比较吃瘪了。
此外就是可能会出现一些展示错误，因为 pdf 文件格式太复杂了，
如果你的 pdf 原文件就复杂，很可能遇到展示错误的问题。
好处就是展示的不是原始文件还是画布，想偷到原始 pdf 文件会困难一些。

还有方案就是直接使用浏览器自带的 pdf 预览功能，
这个方案很完美，就是没法做权限控制，别人直接右键另存为就可以下载了。

malagebidi

2024-09-11 15:30:19 +08:00 via Android

pdf 转图片可以用 imagemagick ，分辨率设置大点效果挺好

listen2wind

2024-09-11 15:32:30 +08:00

@crissx

icandoallthings

2024-09-11 16:28:59 +08:00

pdf 用 embed 标签
word 通过 mammoth.convertToHtml 转成 html 预览
「最近刚做过相关功能」

lovelive1024

2024-09-11 16:35:43 +08:00

支持多种格式，单纯预览还可以
https://github.com/kekingcn/kkFileView

kkstart

2024-09-11 17:32:58 +08:00

@dode
@mesh
@horizon
@jorneyr
@bojackhorseman
@taozywu
@hoopz
@vikaptain
@shadowyue
@YorkWong
谢谢各位的建议，嗯，pdf.js 或者基于浏览器本身的对 PDF 的支持来做的话，遇到大的文件，体验会特别不好，尤其在手机上的话。
所以第一感受是转图片，然后访问图片。

不过转图片的坑也很多，目前碰到的就是产生图片，有时候会出现文字内容不出现的问题。

kkstart

2024-09-11 17:43:27 +08:00

@jatesun
@jorneyr
@78786381
@ufan0
@Fca
@han3sui
@Ritter
@taozywu
@crissx
@snowlee
@vikaptain
@shadowyue
@malagebidi 谢谢各位，word 转 PDF ，目前看肯定是要用 word 的解析库了，要么在线的 API ，要么付费的 sdk ，要么开源的库。
我个人倾向开源库，可控性高一些。
大家实践中用的什么方案？

busier

2024-09-11 20:39:11 +08:00 via iPhone

前些时刚处理类似问题

Python 里面有个 html 转 pdf 的库

把 word 搞成 html 先

kkstart

2024-09-11 20:39:40 +08:00

@shadowyue 是的，我附议老哥的观点。现在尝试的就是 word 转 PDF ，PDF 转图片，目前准备落地的也是这个方案，PDF 转图片，已经实现了，word 转 PDF 还在折腾，可以预见后面 excel 、ppt 转 PDF 也得做。
不知道老哥有没有推荐的落地方案。感谢。

jorneyr

2024-09-11 20:40:05 +08:00

> 目前看肯定是要用 word 的解析库了，要么在线的 API ，要么付费的 sdk ，要么开源的库:

安装一个 LibreOffice ，然后调用命令就可以转了，支持 Linux 。

命令参考: libreoffice --headless --convert-to pdf --outdir /path/to/output /path/to/your/document.docx

kkstart

2024-09-11 20:40:39 +08:00

@busier 我还没有做到 word 转 PDF ，大佬实现出来的效果咋样？期望展开讲讲

kkstart

2024-09-11 20:48:35 +08:00

@jorneyr 谢谢，后面一定要试试。我在想另外一个方案，不知道可行性怎么样。

模拟人肉截图，自动打开 word ，然后一页一页的截图，存为图片。

不知道程序化这个过程怎么走。

Mandelo

2024-09-11 22:03:40 +08:00

服务器将 word 转 pdf ，预览用 pdf.js 就行了

XG9H3BN7CWMMmnjw

2024-09-12 09:22:20 +08:00

@jjshare123 https://api.onlyoffice.com/editors/conversionapi#pdf

XG9H3BN7CWMMmnjw

2024-09-12 09:23:15 +08:00

@jjshare123 #32

ClearMoki

2024-09-12 13:52:47 +08:00

我司现在用的 onlyoffice 的目前看起来效果还行

8zU02dFZkHXS6230

2024-09-12 15:57:21 +08:00

直接用 java 的开源 kkfile,你遇到的坑他基本都遇到了一遍。

kkstart

2024-09-13 01:37:42 +08:00

@ClearMoki 谢谢呀，嗯，你们公司是本地搭建给自己用的吗？还是用的在线 API 呀？

kkstart

2024-09-13 03:27:16 +08:00

@jatesun
@Fca
@han3sui
@Ritter
@Fca
谢谢各位老哥，请问大家是自己搭建了自己用的，还是用的 API 或者云服务呀？

delflare505

2024-09-13 08:43:12 +08:00 via Android

品牌） 8@78786381 8 ）⁸8⁸8⁸88

YILSLIN

2024-09-13 09:39:38 +08:00

我用的 docx-preview 库，纯前端效果还不错

dedemao

2024-09-13 13:41:48 +08:00

找一台 windows 服务器，安装 office 或者 wps ，然后调用他们自带的 com 组件来实现 word 转 pdf 。

Ritter

2024-09-13 14:49:29 +08:00

@jjshare123 有钱就买没钱就自己搭

latiao

2024-09-13 16:06:55 +08:00

我们公司有发票和产品资料快速展示并下载的需求，也是找了好多方法，整个人都搞疯了，后面很长一段时间用的是 kkFileView ，但是出现了各种各样的问题，这里就不多说了
总之，后面无意中找到了一个解决方案（仅针对在线预览），一位大佬写的 vue 组件，可以纯前端预览 docx 、excel 、pdf ，链接给你了，自己看看把

https://501351981.github.io/vue-office/examples/docs/

ClearMoki

2024-09-14 11:44:39 +08:00

@jjshare123 他有一个 react 的组件库，然后需要服务端写一个生成 token 的方法就没了，非常简单