V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jjshare123
V2EX  ›  程序员

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

  •  
  •   jjshare123 · 74 天前 · 3758 次点击
    这是一个创建于 74 天前的主题,其中的信息可能已经有所发展或是发生改变。

    要实现 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 咋转,现在还茫然中。

    45 条回复    2024-09-14 11:44:39 +08:00
    mesh
        3
    mesh  
       74 天前
    pdf 预览直接去找个库不就行了
    horizon
        4
    horizon  
       74 天前
    jatesun
        5
    jatesun  
       74 天前
    直接 onlyoffice 不就好了。
    jorneyr
        6
    jorneyr  
       74 天前   ❤️ 1
    使用 LibreOffice 把 Word, PPT 等转为 PDF ,然后 pdf.js 在线显示 PDF 。
    wusheng0
        7
    wusheng0  
       74 天前
    pdf 看需求吧,一般浏览器对这个支持都挺好,直接 iframe 加载就行
    https://juejin.cn/post/7117521871221817375#heading-4
    78786381
        8
    78786381  
       74 天前
    你需要的是 wps
    ufan0
        9
    ufan0  
       74 天前
    接入 WPS SDK 吧
    Fca
        10
    Fca  
       74 天前
    onlyoffice
    han3sui
        11
    han3sui  
       74 天前
    onlyoffice 可以的
    bojackhorseman
        12
    bojackhorseman  
       74 天前
    pdf 简单,iframe 加载,浏览器自带阅读器
    Ritter
        13
    Ritter  
       74 天前
    onlyoffice 就是麻烦 有钞能力当我没说
    taozywu
        14
    taozywu  
       74 天前
    其实有很多办法了
    1. 可以用第三方 api 搜下
    2. 可以用 pdf.js
    3. 可以将 word 、pdf 统一转 html 可以使用 pdf2htmlEX
    crissx
        15
    crissx  
       74 天前
    java 开源后端 kkfileview
    第三方 Office Web 365, 这个第三方是我见过效果最好的,有一定费用
    hoopz
        16
    hoopz  
       74 天前
    字体那个不大好弄。如果 pdf 内嵌了字体,但是内嵌的有问题的话,react-pdf-viewer 显示出来的会丢字。直接用 chrome 打开 pdf 的话,感觉 chrome 会使用默认字体(?),内容不会少,但是格式可能会有问题。
    vikaptain
        18
    vikaptain  
       74 天前
    pdf: 如果什么要求都没有,直接开个新标签页,如果要在嵌在自己的页面中有 pdf.js 库可以用
    word:如果不想转 pdf ,只是预览的话可以调用微软的 Office Web Viewer(要求一: 必须是互联网可以公开访问, 要求二: 必须是域名且必须是默认端口)
    dq19871123
        19
    dq19871123  
       74 天前
    微软有一套 Office Web Apps Server 解决方案,可以实现 Office 文档的在线预览和编辑,把 api 返回的 iframe 加到网页中就行
    rockxsj
        20
    rockxsj  
       74 天前
    参考下 alist 的实现啊 客户端集成一个 js 就行
    shadowyue
        21
    shadowyue  
       74 天前
    如果你不说预算,我建议你直接使用微软的 onedrive 网盘,
    里边的文件都能自动在线预览,简单又省心。
    企业版应该还能做权限控制。

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

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

    还有方案就是直接使用浏览器自带的 pdf 预览功能,
    这个方案很完美,就是没法做权限控制,别人直接右键另存为就可以下载了。
    malagebidi
        22
    malagebidi  
       74 天前 via Android
    pdf 转图片可以用 imagemagick ,分辨率设置大点效果挺好
    listen2wind
        23
    listen2wind  
       74 天前
    YorkWong
        24
    YorkWong  
       74 天前
    pdf 用 embed 标签
    word 通过 mammoth.convertToHtml 转成 html 预览
    「最近刚做过相关功能」
    ily433664
        25
    ily433664  
       74 天前
    支持多种格式,单纯预览还可以
    https://github.com/kekingcn/kkFileView
    jjshare123
        26
    jjshare123  
    OP
       74 天前
    @dode
    @mesh
    @horizon
    @jorneyr
    @bojackhorseman
    @taozywu
    @hoopz
    @vikaptain
    @shadowyue
    @YorkWong
    谢谢各位的建议,嗯,pdf.js 或者基于 浏览器本身的对 PDF 的支持来做的话,遇到大的文件,体验会特别不好,尤其在手机上的话。
    所以第一感受是转图片,然后访问图片。

    不过转图片的坑也很多,目前碰到的就是产生图片,有时候会出现文字内容不出现的问题。
    jjshare123
        27
    jjshare123  
    OP
       74 天前
    @jatesun
    @jorneyr
    @78786381
    @ufan0
    @Fca
    @han3sui
    @Ritter
    @taozywu
    @crissx
    @snowlee
    @vikaptain
    @shadowyue
    @malagebidi 谢谢各位,word 转 PDF ,目前看肯定是要用 word 的解析库了,要么在线的 API ,要么付费的 sdk ,要么开源的库。
    我个人倾向开源库,可控性高一些。
    大家实践中用的什么方案?
    busier
        28
    busier  
       73 天前 via iPhone
    前些时刚处理类似问题

    Python 里面有个 html 转 pdf 的库

    把 word 搞成 html 先
    jjshare123
        29
    jjshare123  
    OP
       73 天前
    @shadowyue 是的,我附议老哥的观点。现在尝试的就是 word 转 PDF ,PDF 转图片,目前准备落地的也是这个方案,PDF 转图片,已经实现了,word 转 PDF 还在折腾,可以预见后面 excel 、ppt 转 PDF 也得做。
    不知道老哥有没有推荐的落地方案。感谢。
    jorneyr
        30
    jorneyr  
       73 天前   ❤️ 1
    > 目前看肯定是要用 word 的解析库了,要么在线的 API ,要么付费的 sdk ,要么开源的库:

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

    命令参考: libreoffice --headless --convert-to pdf --outdir /path/to/output /path/to/your/document.docx
    jjshare123
        31
    jjshare123  
    OP
       73 天前
    @busier 我还没有做到 word 转 PDF ,大佬实现出来的效果咋样?期望展开讲讲
    jjshare123
        32
    jjshare123  
    OP
       73 天前
    @jorneyr 谢谢,后面一定要试试。我在想另外一个方案,不知道可行性怎么样。

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

    不知道程序化这个过程怎么走。
    Mandelo
        33
    Mandelo  
       73 天前
    服务器将 word 转 pdf ,预览用 pdf.js 就行了
    Fca
        35
    Fca  
       73 天前
    ClearMoki
        36
    ClearMoki  
       73 天前
    我司现在用的 onlyoffice 的目前看起来效果还行
    vaaagle
        37
    vaaagle  
       73 天前
    直接用 java 的开源 kkfile,你遇到的坑他基本都遇到了一遍。
    jjshare123
        38
    jjshare123  
    OP
       72 天前
    @ClearMoki 谢谢呀,嗯,你们公司是本地搭建给自己用的吗?还是用的在线 API 呀?
    jjshare123
        39
    jjshare123  
    OP
       72 天前
    @jatesun
    @Fca
    @han3sui
    @Ritter
    @Fca
    谢谢各位老哥,请问大家是自己搭建了自己用的,还是用的 API 或者云服务呀?
    delflare505
        40
    delflare505  
       72 天前 via Android
    品牌) 8@78786381 8 )⁸8⁸8⁸88
    YILSLIN
        41
    YILSLIN  
       72 天前   ❤️ 1
    我用的 docx-preview 库,纯前端效果还不错
    dedemao
        42
    dedemao  
       72 天前
    找一台 windows 服务器,安装 office 或者 wps ,然后调用他们自带的 com 组件来实现 word 转 pdf 。
    Ritter
        43
    Ritter  
       72 天前
    @jjshare123 有钱就买 没钱就自己搭
    latiao
        44
    latiao  
       72 天前
    我们公司有发票和产品资料快速展示并下载的需求,也是找了好多方法,整个人都搞疯了,后面很长一段时间用的是 kkFileView ,但是出现了各种各样的问题,这里就不多说了
    总之,后面无意中找到了一个解决方案(仅针对在线预览),一位大佬写的 vue 组件,可以纯前端预览 docx 、excel 、pdf ,链接给你了,自己看看把

    https://501351981.github.io/vue-office/examples/docs/
    ClearMoki
        45
    ClearMoki  
       71 天前
    @jjshare123 他有一个 react 的组件库,然后需要服务端写一个生成 token 的方法就没了,非常简单
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2901 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:17 · PVG 20:17 · LAX 04:17 · JFK 07:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.