vue：pdf.js使用细节/隐藏按钮/设置、获取当前页码/记录阅读进度/切换语言（国际化）

news2025/7/23 6:48:00

需求描述

在网页中预览pdf时，希望实现3点需求：1、隐藏一些功能按钮（比如下载）；2、打开pdf时自动定位到最后浏览的页（记录阅读进度）；3、实现国际化（在代码中更改pdf插件使用的语言）。
以上需求使用Chrome自带的pdf插件难以实现，经过调研，决定使用pdf.js来实现。

vue项目中使用pdf.js

这部分内容可以参考：vue项目中使用pdf.js预览pdf文件，原文的vue-pdf.js-demo非常有参考价值~

此处记录本杂鱼在项目中引入pdf.js时踩到的一个坑：使用iframe加载项目public文件夹下的HTML文件，可以参考vue-public文件夹。
项目public下引入的pdf.js文件（从vue-pdf.js-demo中拷贝）：
引入pdf.js相关文件

需求调研

这一段落详细记录了本杂鱼实现这三点需求的过程，只需要参考代码的小伙伴可以直奔文末自取哈~

隐藏按钮

在实现了vue中使用pdf.js预览pdf后，开始处理附加的需求，从隐藏功能按钮入手；以隐藏下载按钮为例，F12找出下载按钮的id（download），如下图：
找到下载按钮
接着到viewer.js中搜索“download”，找出设置配置项的代码，如下图：

在viewer.js中搜索配置项名称“PDFViewerApplication”，可以看到它被挂载到了window对象上：
window.PDFViewerApplication
在新的标签页中预览pdf，在控制台打印出网页的window对象（window）：
新标签页打印window对象
在iframe中预览pdf，在控制台打印出iframe的window对象（document.getElementById(“iframe的id”).contentWindow）：
iframe打印window对象
参照viewer.js中的配置项，在控制台直接修改相应配置，即可隐藏下载按钮：
PS：要重新显示隐藏的按钮用setAttribute(“hidden”, false)无效，需要removeAttribute(“hidden”)

设置、获取当前页码（记录阅读进度）

要在打开pdf时自动定位到上回浏览的页码，需要做到两点：1、pdf当前页码变更时，获取并记录页码；2、重新打开pdf时，当前页码设置为最后一次保存的页码。有了阅读的页数，再获取到pdf的总页数，自然就能计算出阅读进度啦~
Emm…实话实说，这有亿点运气的成分，本杂鱼在翻控制台输出的window.PDFViewerApplication的属性时，看到了这样两项：
PDFViewerApplication配置项
经过观察，PDFViewerApplication.page就是当前的页码，而PDFViewerApplication.pagesCount就是pdf的总页数~此外，小伙伴们有没有发现，这两项数据打印的结果是(…)，在vue中打印data里双向绑定的数据也是这样！所以直接修改PDFViewerApplication.page的值就能实现跳页：

页码变更时，pdf容器必然发生了滚动，因此只需要监听容器的滚动即可；可以通过记录并判断页码是否发生了变化实现防抖。
使用demo中的viewer.html加载pdf时，容器id为viewerContainer：
pdf容器id

切换语言（国际化）

首先尝试切换浏览器的语言，观察到pdf.js插件显示语言会随浏览器语言变化（只尝试了简中和英语）：
切换浏览器语言
于是viewer.js中一定存在获取浏览器语言的代码（navigator.language），搜索出这样一个配置项：
语言配置
于是继续在viewer.js中搜索“.locale”，找到这样一个函数：
初始化语言
可以看到，viewer.js会从pdf文件链接的哈希中获取locale配置项（也就是需要使用的语言）的值！但注意函数开头的判断语句，还需要打开pdfBugEnabled配置才能自定义语言，在viewer.js中搜索pdfBugEnabled，并将它的赋值改为true：
打开配置开关
然鹅这样就阔以了吗？NONONO，还需要引入对应的语言包：
首先拉取pdf.js，可以看到一个“l10n”文件夹，里面存放着各种语言包；将要用到的语言包拷贝到web.locale文件夹下，并在locale.properties中引入包内的文件即可（官网没有en这个语言包，这里是拷贝了en-US这个包后修改了文件夹名称）：
引入语言包
当然，最后不要忘记在pdf文件链接的哈希中加入locale参数哦！
加入哈希参数locale

参考代码

首先需要获取vue项目中使用pdf.js预览pdf文件这篇博客提供的demo：vue-pdf.js-demo，然后将需要的文件拷贝到自己项目的public下，可参考文章开头的截图；最后在项目中新建一个pdfViewer.vue，内容如下：

<!--
 * @Author: shenmingming
 * @Date: 2023-02-23 09:45:00
 * @LastEditors: shenmingming
 * @LastEditTime: 2023-02-24 10:48:19
 * @Description: 封装pdf.js插件
-->
<template>
  <div
    v-loading="pdfLoading"
    class="pdf-viewer"
  >
    <!-- 这里加载的pdf是接口返回网址的格式，filePath格式：https://IP/路径/文件名.pdf?token=XXX -->
    <!-- 如果需要使用其他方式加载pdf，请参考vue-pdf.js-demo中的HelloWorld.vue -->
    <iframe
      id="pdf-iframe"
      :src="`${publicPath}/pdfjs/web/viewer.html?file=${encodeURIComponent(filePath)}#toolbar=0&locale=${localLan}`"
      frameborder="0"
    />
  </div>
</template>

<script>
export default {
  name: 'PdfViewer',
  props: {
    filePath: { // 文件网址
      type: String,
      default: () => ''
    },
    initPage: { // 初始页码
      type: Number,
      default: () => 1
    },
    hideBtns: { // 隐藏的pdf功能按钮
      type: Array,
      default: () => [`openFile`, `print`, `download`, `viewBookmark`, `toggle`]
    },
    localLan: { // 语言（默认简中）
      type: String,
      default: () => 'zh-CN'
    },
  },
  data () {
    return {
      publicPath: process.env.BASE_URL || `/`,
      interval: null, // 轮询pdf加载状态定时器
      pdfPageNow: this.initPage, // pdf当前页码
      pdfLoading: true, // 是否显示加载效果
      reloadTime: 50 // 检测加载状态50次未加载成功（15s），判断为加载失败
    }
  },
  mounted () {
    // 每300ms判断pdf加载状态，直到加载完成
    this.interval = setInterval(this.checkPdf, 300)
  },
  methods: {
    checkPdf () { // 轮询pdf文件加载状态
      if (!document.getElementById('pdf-iframe') || this.reloadTime-- < 1) { // 加载失败
        clearInterval(this.interval)
        return
      }

      let pdfFrame = document.getElementById('pdf-iframe').contentWindow
      let maxNum = pdfFrame.document.getElementById('pageNumber').getAttribute('max')
      if (maxNum == 0 || maxNum == undefined) { // 直接获取页面显示的总页数，获取到了说明加载完成
        console.info('Loading...')
      } else {
        clearInterval(this.interval)
        this.hidePdfBtns()
        pdfFrame.PDFViewerApplication.page = this.pdfPageNow // pdf跳页
        this.pdfLoading = false
        if (maxNum < 2) { // 只有一页的pdf，进度更新为100%
          console.log(`1/1, prog：100%`)
        } else {
          pdfFrame.document.getElementById('viewerContainer') // 监听pdf滚动事件
            .addEventListener('scroll', e => {
              let pdfInfo = pdfFrame.PDFViewerApplication
              if (this.pdfPageNow !== pdfInfo.page) { // 防抖：当前页变化时，更新进度
                this.pdfPageNow = pdfInfo.page
                console.log(`${pdfInfo.page}/${pdfInfo.pagesCount}, prog：${parseInt(pdfInfo.page / pdfInfo.pagesCount)}%`)
              }
            })
        }
      }
    },
    hidePdfBtns () { // 隐藏pdf功能按钮
      let pdfConfig = document.getElementById('pdf-iframe').contentWindow.PDFViewerApplication.appConfig
      this.hideBtns.forEach(btn => {
        if (pdfConfig.toolbar[btn]) pdfConfig.toolbar[btn].hidden = true
        if (pdfConfig.secondaryToolbar[`${btn}Button`]) pdfConfig.secondaryToolbar[`${btn}Button`].hidden = true
      })
    }
  }
}
</script>

<style scoped>
.pdf-viewer,
iframe {
  width: 100%;
  height: 100%;
}
</style>

需要注意的是：

1、这段参考代码加载的pdf是接口返回网址的格式，filePath格式类似“https://IP/路径/文件名.pdf?token=XXX”，如果需要使用其他方式加载pdf，请参考vue-pdf.js-demo中的HelloWorld.vue；
2、切换语言（国际化）还需要打开viewer.js中的配置开关，以及在项目中引入对应的语言包，具体请参考需求调研部分

最后，在需要的地方调用pdfViewer组件，自行按需调试即可~★▼★~