传奇怎么建设自己的网站,移动网站建设制作,网站开发需要什么步骤,wordpress网站商务通需求描述
在网页中预览pdf时#xff0c;希望实现3点需求#xff1a;1、隐藏一些功能按钮#xff08;比如下载#xff09;#xff1b;2、打开pdf时自动定位到最后浏览的页#xff08;记录阅读进度#xff09;#xff1b;3、实现国际化#xff08;在代码中更改pdf插件使…需求描述
在网页中预览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中拷贝
需求调研
这一段落详细记录了本杂鱼实现这三点需求的过程只需要参考代码的小伙伴可以直奔文末自取哈~
隐藏按钮
在实现了vue中使用pdf.js预览pdf后开始处理附加的需求从隐藏功能按钮入手以隐藏下载按钮为例F12找出下载按钮的iddownload如下图 接着到viewer.js中搜索“download”找出设置配置项的代码如下图 在viewer.js中搜索配置项名称“PDFViewerApplication”可以看到它被挂载到了window对象上 在新的标签页中预览pdf在控制台打印出网页的window对象window 在iframe中预览pdf在控制台打印出iframe的window对象document.getElementById(“iframe的id”).contentWindow 参照viewer.js中的配置项在控制台直接修改相应配置即可隐藏下载按钮 PS要重新显示隐藏的按钮用setAttribute(“hidden”, false)无效需要removeAttribute(“hidden”)
设置、获取当前页码记录阅读进度
要在打开pdf时自动定位到上回浏览的页码需要做到两点1、pdf当前页码变更时获取并记录页码2、重新打开pdf时当前页码设置为最后一次保存的页码。有了阅读的页数再获取到pdf的总页数自然就能计算出阅读进度啦~ Emm…实话实说这有亿点运气的成分本杂鱼在翻控制台输出的window.PDFViewerApplication的属性时看到了这样两项 经过观察PDFViewerApplication.page就是当前的页码而PDFViewerApplication.pagesCount就是pdf的总页数~此外小伙伴们有没有发现这两项数据打印的结果是(…)在vue中打印data里双向绑定的数据也是这样所以直接修改PDFViewerApplication.page的值就能实现跳页 页码变更时pdf容器必然发生了滚动因此只需要监听容器的滚动即可可以通过记录并判断页码是否发生了变化实现防抖。 使用demo中的viewer.html加载pdf时容器id为viewerContainer
切换语言国际化
首先尝试切换浏览器的语言观察到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参数哦
参考代码
首先需要获取vue项目中使用pdf.js预览pdf文件这篇博客提供的demovue-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插件
--
templatedivv-loadingpdfLoadingclasspdf-viewer!-- 这里加载的pdf是接口返回网址的格式filePath格式https://IP/路径/文件名.pdf?tokenXXX --!-- 如果需要使用其他方式加载pdf请参考vue-pdf.js-demo中的HelloWorld.vue --iframeidpdf-iframe:src${publicPath}/pdfjs/web/viewer.html?file${encodeURIComponent(filePath)}#toolbar0locale${localLan}frameborder0//div
/templatescript
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, prog100%)} 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})}}
}
/scriptstyle scoped
.pdf-viewer,
iframe {width: 100%;height: 100%;
}
/style
需要注意的是 1、这段参考代码加载的pdf是接口返回网址的格式filePath格式类似“https://IP/路径/文件名.pdf?tokenXXX”如果需要使用其他方式加载pdf请参考vue-pdf.js-demo中的HelloWorld.vue 2、切换语言国际化还需要打开viewer.js中的配置开关以及在项目中引入对应的语言包具体请参考需求调研部分 最后在需要的地方调用pdfViewer组件自行按需调试即可~★▼★~
参考文档
[1] pdf.js [2] vue项目中使用pdf.js预览pdf文件 [3] vue-public文件夹 [4] 哈希location.hash详解
