页面预览 PDF 文件

[burnbrid]

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

[YuxiangLuo]

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

[sevenzhou1218]

jspdf

[jydeng]

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

[chanchan]

<embed>标签?

[burnbrid]

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

[jydeng]

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

[HeyWeGo]

lanhuapp.com/meeting

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

[dodo2012]

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

[burnbrid]

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

[dodo2012]

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

[davin]

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