首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
burnbrid
V2EX  ›  HTML

页面预览 PDF 文件

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

    早安,先生们。我想问下怎么把一个 PDF 文件直接展示到页面上给用户看?不需要用户去下载,直接在网页上预览。

    11 条回复    2020-04-15 13:28:05 +08:00
    YuxiangLuo
        1
    YuxiangLuo   89 天前 via Android
    sevenzhou1218
        2
    sevenzhou1218   89 天前
    jspdf
    jydeng
        3
    jydeng   89 天前
    pdf.js +1 最近刚刚做了一个类似的项目。
    chanchan
        4
    chanchan   89 天前
    <embed>标签?
    burnbrid
        5
    burnbrid   89 天前
    @jydeng 能看下你源码吗?我老笨,培训学校出来的
    jydeng
        6
    jydeng   89 天前
    @burnbrid 项目是基于 vue 的,关键字:vue-pdf
    HeyWeGo
        7
    HeyWeGo   89 天前
    lanhuapp.com/meeting

    我觉得简单场景下,上面链接里的实现方式挺合适的。看上去就是用浏览器自带的预览,iframe 嵌入
    dodo2012
        8
    dodo2012   89 天前
    移动端 pdf.js 有时不好用,我后来直接把 pdf 弄成一张张图片了
    dodo2012
        10
    dodo2012   89 天前
    @burnbrid 这个在手机上有时是会有问题,所以我直接生成图片加载了😭
    davin
        11
    davin   89 天前
    原文件本身就是 pdf 格式的么,还是从 office 文档( pptx/docx/xlsx )转换来的?如果原文件是 office 文档,可以把文件放在远程服务器上,在浏览器输入 https://view.officeapps.live.com/op/embed.aspx?src= 再在等号后面加上以 https 开头的远程路径文件(可以是 pptx/docx/xlsx 格式)地址即可进行访问。

    一般的小项目,直接 object + embed 解决了:
    <object data="***.pdf" type="application/pdf" width="400" height="600">
    <embed src="***.pdf" type="application/pdf">
    <p>当前浏览器不支持 PDF 预览,请<a href="***.pdf">下载</a>后载查看。</p>
    </embed>
    </object>
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1082 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 116ms · UTC 20:06 · PVG 04:06 · LAX 13:06 · JFK 16:06
    ♥ Do have faith in what you're doing.