当前位置：首页 > news >正文

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

news 2025/8/19 0:07:37

需求描述

在网页中预览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><divv-loading="pdfLoading"class="pdf-viewer"><!-- 这里加载的pdf是接口返回网址的格式，filePath格式：https://IP/路径/文件名.pdf?token=XXX --><!-- 如果需要使用其他方式加载pdf，请参考vue-pdf.js-demo中的HelloWorld.vue --><iframeid="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').contentWindowlet 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 = falseif (maxNum < 2) { // 只有一页的pdf，进度更新为100%console.log(`1/1, prog：100%`)} else {pdfFrame.document.getElementById('viewerContainer') // 监听pdf滚动事件.addEventListener('scroll', e => {let pdfInfo = pdfFrame.PDFViewerApplicationif (this.pdfPageNow !== pdfInfo.page) { // 防抖：当前页变化时，更新进度this.pdfPageNow = pdfInfo.pageconsole.log(`${pdfInfo.page}/${pdfInfo.pagesCount}, prog：${parseInt(pdfInfo.page / pdfInfo.pagesCount)}%`)}})}}},hidePdfBtns () { // 隐藏pdf功能按钮let pdfConfig = document.getElementById('pdf-iframe').contentWindow.PDFViewerApplication.appConfigthis.hideBtns.forEach(btn => {if (pdfConfig.toolbar[btn]) pdfConfig.toolbar[btn].hidden = trueif (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组件，自行按需调试即可~★▼★~