如何使用pdf.js展示pdf文件(亲测可用)

更新时间：2023年10月14日 10:17:34 作者：你邻座的怪同学

这篇文章主要介绍了如何使用pdf.js展示pdf文件(亲测可用),如果只是电脑端,可通过 iframe 标签嵌套预览,文中介绍了安装电脑ios的通用方法,感兴趣的朋友跟随小编一起看看吧

简单的实现方式

如果只是电脑端，可通过 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是文章开头的方法获取的客户端类型

	<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

到此这篇关于使用pdf.js展示pdf文件(亲测可用)的文章就介绍到这了,更多相关pdf.js展示pdf文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript之移动端H5生成图片解决方案讲解
这篇文章主要介绍了JavaScript之移动端H5生成图片解决方案讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
TypeScript类型推论与类型断言实例详解
如果没有明确的指定类型,那么TypeScript会依照类型推论（Type Inference）的规则推断出一个类型,下面这篇文章主要给大家介绍了关于TypeScript类型推论与类型断言的相关资料,需要的朋友可以参考下
2022-11-11
javascript代码优化的8点总结
本篇文章给大家分享了关于javascript代码优化的8点总结，希望我们整理的内容能够帮助到大家。
2018-01-01
JavaScript面向对象之私有静态变量实例分析
这篇文章主要介绍了JavaScript面向对象之私有静态变量,结合实例形式分析了私有静态变量的定义与使用方法,需要的朋友可以参考下
2016-01-01
详解vue-cli+es6引入es5写的js(两种方法)
本文通过两种方法给大家介绍vue-cli+es6引入es5写的js，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
小程序页面之间数据传递的4种方法总结
由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结,下面这篇文章主要给大家总结介绍了关于小程序页面之间数据传递的4种方法,需要的朋友可以参考下
2023-04-04
JS对select控件option选项的增删改查示例代码
Javascript操作select是表单中比较常见的，大家可以在网上搜索到很多的相关资料，接下来为大家详细介绍下，JS动态操作select中的各种方法，感兴趣的朋友可以参考下
2013-10-10
手写Spirit防抖函数underscore和节流函数lodash
这篇文章主要介绍了手写Spirit防抖函数underscore和节流函数lodash，接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数
2022-03-03
不用typsescript如何使用类型增强功能
这篇文章主要给大家介绍了关于不用typsescript如何使用类型增强功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
一篇文章教你JS函数继承
这篇文章主要介绍了js继承方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-09-09