简单的实现方式
如果只是电脑端,可通过 iframe
标签嵌套预览
ios手机端可通过 a
标签包裹点击跳转预览(安卓端不行)
安卓电脑ios的通用方法
资料
老版本github地址
全版本地址
获取当前客户端类型
judgeClient() {
let client = ''
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
client = 'iOS'
} else if (/(Android)/i.test(navigator.userAgent)) { // 判断Android
client = 'Android'
} else {
client = 'PC'
}
return client
}
正式开始
下载及安装pdf.js插件
前往官方地址下载插件包 http://mozilla.github.io/pdf.js/
此链接可下载最新版本,不兼容老版本浏览器和苹果系统,若需在苹果展示则使用最上面老版本系统,或者下载右边的旧版浏览器版本(没有尝试过
)
引入项目
在public文件夹下新建pdfjs文件夹,将解压后的文件放进去
解压后的
放到项目中
使用
第一种方法(文件链接或者静态文件)
- 解决跨域问题
先解决pdfjs自带的跨域拦截:
新版本
找到/web/viewer.js,搜索 fileOrigin,并注释以下代码段
老版本
找到/web/viewer.js,搜索 if (origin !== viewerOrigin && protocol !== “blob:”) {,并注释以下代码段
- 使用iframe嵌入即可
file后携带需要展示的pdf链接
<iframe src="pdfjs/web/viewer.html?file=http://xxxx/file/xxxx.pdf" width="500" height="500"></iframe>
注意:
要展示的pdf必须和psf.js文件在同一个域名或者ip下
第二种方法
1、先创建个iframe标签,给定一个id
2、从后端获取blob形式的pdf文件,具体怎么获取和后端商定(思路,后端提供一个接口,参数为文件链接,前端带参文件链接请求接口后,接口返回此文件链接的blob形式的文件流。)
3、获取到blob形式的pdf文件后,添加到iframe中,完成
解决mac OS 的safari浏览器不兼容的问题
方法一
直接使用老版本,我测试使用老版本对项目暂无任何影响
方法二(使用老版本的pdfjs即可,这个方法概率性出现pdf按钮不显示的问题)
老版本和新版本同时引入,当请求页面是判断当前客户端类型,若是ios则使用老版本的pdf.js文件
最笨的代码示例
client是文章开头的方法获取的客户端类型文章来源:https://www.toymoban.com/news/detail-501109.html
<iframe
v-if="item.url && item.url.split('.').pop().toLowerCase() === 'pdf' && client !== 'iOS'"
:src="'pdfjs/new/web/viewer.html?file=' + item.url"
allow="fullscreen"
align="center"
name="ifd"
width="100%"
scrolling="no"
frameborder="0"
type="application/pdf"
height="700"/>
<iframe
v-else-if="item.url && item.url.split('.').pop().toLowerCase() === 'pdf' && client === 'iOS'"
:src="'pdfjs/old/web/viewer.html?file=' + item.url"
allow="fullscreen"
align="center"
name="ifd"
width="100%"
scrolling="no"
frameborder="0"
type="application/pdf"
height="700"/>
参考文章
https://www.cnblogs.com/huihuihero/p/16892882.html文章来源地址https://www.toymoban.com/news/detail-501109.html
到了这里,关于使用pdf.js展示pdf文件(亲测可用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!