页面预览 PDF 文件

V2EX = way to explore

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

现在注册

已注册用户请登录

Dive into HTML5

› http://diveintohtml5.org/

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

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

PDF

预览

页面

文件

11 条回复 • 2020-04-15 13:28:05 +08:00

1KN6sAqR0a57no6s

2020-04-15 08:52:31 +08:00 via Android

https://github.com/mozilla/pdf.js/

sevenzhou1218

2020-04-15 08:52:56 +08:00

jspdf

jydeng

2020-04-15 08:58:13 +08:00

pdf.js +1 最近刚刚做了一个类似的项目。

chanchan

2020-04-15 09:02:14 +08:00

<embed>标签?

burnbrid

2020-04-15 09:02:29 +08:00

@jydeng 能看下你源码吗？我老笨，培训学校出来的

jydeng

2020-04-15 09:09:38 +08:00

@burnbrid 项目是基于 vue 的，关键字：vue-pdf

HeyWeGo

2020-04-15 09:10:17 +08:00

lanhuapp.com/meeting

我觉得简单场景下，上面链接里的实现方式挺合适的。看上去就是用浏览器自带的预览，iframe 嵌入

dodo2012

2020-04-15 09:13:37 +08:00

移动端 pdf.js 有时不好用，我后来直接把 pdf 弄成一张张图片了

burnbrid

2020-04-15 09:58:59 +08:00

@dodo2012 pdf.js 官方示例连接，https://mozilla.github.io/pdf.js/web/viewer.html,我用手机浏览器访问页面直接报错了

dodo2012

2020-04-15 12:34:12 +08:00

@burnbrid 这个在手机上有时是会有问题，所以我直接生成图片加载了😭

davin

2020-04-15 13:28:05 +08:00

原文件本身就是 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>