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);
});
}
});
}
}