javascript vue pdf.js获取当前页码/记录阅读进度

vue使用pdf.js获取当前页码/记录阅读进度

业务需求vue使用pdf.js设置、获取当前页码（记录阅读进度）

核心代码参考文章

业务需求

在网页中预览pdf时，希望实现打开pdf时自动定位到最后浏览的页（记录阅读进度）

使用自带的iframe标签难以实现，经过调研查阅资料，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js。

但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！

其实这和前端框架无关的，直接使用pdf.js原生就可以！

从官网直接下载，链接：pdfjs下载地址，注意放在static文件目录下。参考vue-pdf.js-demo可以看看里面的代码。

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）。资源目录如下：

vue使用pdf.js

使用iframe标签，将src的路径指向本地资源pdf.js src的具体路径如下 图片中getImageUrl（）方法是获取后端返回的pdf资源文件的路径，如下图拼接

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

要在打开pdf时自动定位到上回浏览的页码，需要做到两点：

1、pdf当前页码变更时，获取并记录页码； 2、重新打开pdf时，当前页码设置为最后一次保存的页码。

PDFViewerApplication.page就是当前的页码，而PDFViewerApplication.pagesCount就是pdf的总页数，直接修改PDFViewerApplication.page的值就能实现跳页。PDFViewerApplication对象具体参数如下：

核心代码

let pdfFrame = document.getElementById("previewPDF").contentWindow;

let maxNum = pdfFrame.document

.getElementById("pageNumber")

.getAttribute("max");

if (maxNum == 0 || maxNum == undefined) {

// 直接获取页面显示的总页数，获取到了说明加载完成

console.info("Loading...");

} else {

let data = { chapterContentId: this.fileData.id, uuid: this.fileData.uuid }

const res = await getUserstudyschedule(data)

let schedule = 1

if (res.data.data.length) {

schedule = res.data.data[0].schedule

}

pdfFrame.PDFViewerApplication.page = Number(schedule); // pdf跳页

if (maxNum < 2) {

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;

let data = {

chapterContentId: this.fileData.id,

fileScheduleVo: {

uuid: this.fileData.uuid,

schedule: this.pdfPageNow

}

};

// 向后端传参保存进度

postUserstudyschedule(data).then(res => {

console.log(res);

});

}

});

}

}

参考文章

1.pdf.js 2.vue-pdf.js-demo 3.vue：pdf.js使用细节

相关文章