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

这篇具有很好参考价值的文章主要介绍了使用pdf.js展示pdf文件(亲测可用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简单的实现方式

如果只是电脑端,可通过 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/
此链接可下载最新版本,不兼容老版本浏览器和苹果系统,若需在苹果展示则使用最上面老版本系统,或者下载右边的旧版浏览器版本(没有尝试过
使用pdf.js展示pdf文件(亲测可用)

引入项目

在public文件夹下新建pdfjs文件夹,将解压后的文件放进去

解压后的
使用pdf.js展示pdf文件(亲测可用)
放到项目中
使用pdf.js展示pdf文件(亲测可用)

使用

第一种方法(文件链接或者静态文件)

  1. 解决跨域问题

先解决pdfjs自带的跨域拦截:
新版本
找到/web/viewer.js,搜索 fileOrigin,并注释以下代码段
使用pdf.js展示pdf文件(亲测可用)
老版本
找到/web/viewer.js,搜索 if (origin !== viewerOrigin && protocol !== “blob:”) {,并注释以下代码段
使用pdf.js展示pdf文件(亲测可用)

  1. 使用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
使用pdf.js展示pdf文件(亲测可用)
2、从后端获取blob形式的pdf文件,具体怎么获取和后端商定(思路,后端提供一个接口,参数为文件链接,前端带参文件链接请求接口后,接口返回此文件链接的blob形式的文件流。)
使用pdf.js展示pdf文件(亲测可用)
3、获取到blob形式的pdf文件后,添加到iframe中,完成
使用pdf.js展示pdf文件(亲测可用)

解决mac OS 的safari浏览器不兼容的问题

方法一

直接使用老版本,我测试使用老版本对项目暂无任何影响

方法二(使用老版本的pdfjs即可,这个方法概率性出现pdf按钮不显示的问题)

老版本和新版本同时引入,当请求页面是判断当前客户端类型,若是ios则使用老版本的pdf.js文件

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

最笨的代码示例

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文章来源地址https://www.toymoban.com/news/detail-501109.html

到了这里,关于使用pdf.js展示pdf文件(亲测可用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流

    官网地址:http://mozilla.github.io/pdf.js/ 中文文档地址:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。 pdf.js主要包含两个库文件 pdf.js:负责API解析 pdf.wor

    2024年02月13日
    浏览(70)
  • PDF.js实现按需分片加载pdf文件

    1.服务端配置 分片加载的实现是基于 HTTP-RANGE,即服务端的文件接口必须实现了HTTP-RANGE。 服务端文件接口实现HTTP-RANGE,需要服务端添加如下响应头 2.下载 releases 包 在 mozilla/pdf.js 的github仓库下载最新的 Releases 包 https://github.com/mozilla/pdf.js/releases 这里以 Vue 为例,其他前端框架

    2024年01月17日
    浏览(46)
  • Linux服务器(centos7)中Word转换PDF,文档出现中文乱码或方格【亲测可用,已解决】

    提示:在centos服务器使用aspose.word转换word文件为pdf的时候只有中文乱码或则方格,但是在win服务器上使用可以正常转换。本次文章主要解决字体缺失问题 提示:word转换pdf在服务器上出现中文乱码或者方格状态(主要问题是字体缺失)。 在centos服务器使用aspose.word转换word文件

    2024年02月08日
    浏览(65)
  • js实现PDF 预览和文件下载

    在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能, PDF 类型文件的来源又包括 H5 移动端 和 PC 端 ,而针对这两个不同端的处理会有些许不同,下文会有所提及。 针对 PDF 预览 的文章不在少数,但似乎都没有提及可能遇到的问题,或是提供对应的具体需求场景下如何

    2024年02月15日
    浏览(53)
  • 使用pdf.js预览pdf文件时如何兼容chrome66版本

    最近在做一个需求,在PC端实现预览pdf文件的功能,但是要最低兼容chrome的66版本,因为公司用的chrome浏览器最低版本就是66版本。 现在下载PDF.js (链接:https://mozilla.github.io/pdf.js/) 下载下来的版本是 v3.11.174 ,都是已经构建好的。 我先拿 v3.11.174 这个版本试了一下,发现在

    2024年02月07日
    浏览(55)
  • 微信小程序 连接云数据库(不使用云函数)进行 登录、注册、查询(包括模糊查询)快速实现 亲测可用

    当连接MySQL的时候总是出现各种各样的小问题,可以选用微信小程序自带的云数据库 注:测试号不能建立云数据库 按图中步骤来 第4步中,有两种添加方式 第一种 第二种 注意: 如果你是粘贴复制的,他会报错 非数字字符\\\"无法使用外部字符串表示法位于第1行 。这时,在第

    2023年04月20日
    浏览(61)
  • vue3 实现简单计数器示例——一个html文件展示vue3的效果

    目的 :作为一个新手开发,我想使用 Vue 3 将代码封装在 HTML 文件中时,进行界面打开展示。 学了一个简单计数器界面展示,代码如下: 在 上述HTML 文件里,包含了文件头标题 title , 接着定义了一个内容 div id=\\\"app\\\" 而后定义了一个内容,包含标题和数字,以及两个按钮的 templa

    2024年01月18日
    浏览(44)
  • uniapp获取 pdf文件流 并展示

    1、流数据 uni.request({ url: this.$config.apiUrl+“/api/report/content/fill?code=bv.mf.refund.pay.voucherbusiNo=00201323051500148949”, header: { ‘content-type’: ‘application/json;charset=utf-8’, ‘X-App-Code’: ‘weixin’, ‘X-Source’: ‘program’, ‘X-Token’: store.getters.token }, responseType:‘arraybuffer’, success: (data) =

    2024年02月11日
    浏览(35)
  • ARIMA实现(亲测可用)

    需要jar包Jama-1.0.2.jar,数据:时序数据的值 下载连接 https://download.csdn.net/download/dongyang1124/86265504

    2024年02月16日
    浏览(33)
  • linux安装nginx,配置系统文件,配置systemctl命令,亲测可用,

    先安装gcc-c++编译器 安装pcre包 安装zlib包 在/usr/local/创建nginx文件 进入nginx目录 下载nginx安装包 注:如果没有wget命令,就安装命令 解压安装包 执行以下三个命令 添加到系统服务中 最后加入配置 重载配置 添加systemctl命令 添加内容 重新加载系统服务 启动服务 停止服务 重启

    2024年02月02日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包