最近,遇到一个这样的需求:
pdf预览界面,缓存原文的当前页码,再次进入时,跳转到该页码继续预览。
如果需要统计pdf阅读进度,需要修改源码,把当前阅读页码存到缓存中的数据记录给页面,这样就可以实现统计进度了。
修改pdf.js
源码后,顺利的解决了。
第一步,pdf.js封装到一个组件里面
我把pdf.js放在静态资源文件夹下,这个pdf.js可以去官网下载。
传送门:
然后封装了一个组件,通过iframe的形式引入pdf.js
的viewer.html
页面。 将pdfurl地址和当前页码作为参数传入。
PdfDetail.vue组件代码如下
<template>
<div class="pdf">
<div class="box-card pdf-viewer">
<iframe
:src="'static/pdf/web/viewer.html?file=' + encodeURIComponent(pdf) + '&pdfurl='+ pdf + '&highlight=' + highlight + '&page=' + pdfCurrentPage"
:height="height"
ref="iframe"
width="100%"
frameborder="0"
></iframe>
</div>
</div>
</template>
<script>
export default {
name: "PdfDetail",
components: {},
props: {
pdf: {
type: String,
default: "",
},
height: {
type: Number,
default: 560
},
highlight: {
type: String,
default: ''
},
// PDF.js 获取当前页页数,显示从第几页开始
pdfCurrentPage:{
type: String | Number,
// 默认值为1
default: 1
}
},
data() {
return {};
},
watch: {
pdfCurrentPage(newVal){
console.log('监听页码变化' + newVal);
},
pdf(newVal){
console.log('监听pdf变化' + newVal);
}
},
computed: {},
methods: {},
created() {
},
mounted() {
},
};
</script>
<style scoped>
.wrapper {
}
</style>
复制代码
第二步,修改pdf.js的源码
1.缓存当前页码的方法
在viewer.js
文件搜索关键词“_writeToStorage
”在方法体中,找到如下代码。
localStorage.setItem("pdfjs.history", databaseStr);
复制代码
pdf.js
在这里保存了pdfjs.history
到本地缓存中。
于是,在此之前,可以将当前的页码,也保存到本地缓存中去。
修改源码:
// 修改源码
// 获取当前页面
var currentPageNumber = document.getElementById("pageNumber").value;
var currentPdfUrl = PDFViewerApplication.pdfUrl;
var currentPageNumberList = [];
var numberList = localStorage.getItem("pdfjs.number-ist")
var currentPageObject = {
url: currentPdfUrl,
page: currentPageNumber
}
if(numberList){
var addPageFlag = false;
currentPageNumberList = JSON.parse(numberList);
currentPageNumberList.forEach(function (element) {
if(element.url == currentPdfUrl){
element.page = currentPageNumber;
}else{
addPageFlag = true;
}
});
}
if(addPageFlag || currentPageNumberList.length == 0){
currentPageNumberList.push(currentPageObject);
}
localStorage.setItem("pdfjs.number-ist", JSON.stringify(currentPageNumberList));
// 修改源码
复制代码
2.再次进入时,跳转到该页码继续预览
在viewer.js
文件搜索关键词“setInitialView
”,在方法体的开头,增加一段跳转至指定页码的代码
// 修改源码 获取url
var c_url=window.location.href;
console.log(c_url,'pdfurl')
//获取参数
if(c_url.indexOf("&")&&c_url.indexOf("=")){undefined
var c_urlArray={}
var c_val=c_url.split('?')[1];
var c_valArray=c_val.split('&');
console.log(c_valArray,'c_valArray')
for(let i=0;i<c_valArray.length;i++){undefined
let c_key=c_valArray[i].split('=')[0];
let c_value=c_valArray[i].split('=')[1];
c_urlArray[c_key]=c_value;
}
//跳转至指定页码
if(c_urlArray['page']){undefined
document.getElementById('pageNumber').value = c_urlArray['page']*1;
this.pdfViewer.currentPageNumber = c_urlArray['page']*1;
console.log(this.pdfViewer.currentPageNumber,'this.pdfViewer.currentPageNumber==')
}
}
// 修改源码
复制代码
3.修改webViewerInitialized方法,接收传入的pdf文件路径
修改源码
// 修改源码
var pdfurl = "pdfurl" in params ? params.pdfurl: '';
console.log('pdfurl')
console.log(pdfurl)
PDFViewerApplication.pdfUrl = pdfurl;
// 修改源码
复制代码
第三步,引入该组件
pdf.js
源码修改完成,最后在需要引入PdfDetail
组件的页面,传入pdf文件的url路径:pdfurl
,和缓存页码:pdfCurrentPage
就可以了。
<pdf-detail
:pdf="pdfurl"
:pdfCurrentPage="pdfCurrentPage"
class="box-content"
:height="800"
></pdf-detail>
复制代码
设置当前缓存页码的方法
setCurrentPage(){
this.pdfCurrentPage = 1;
let numberList = localStorage.getItem("pdfjs.number-ist")
if(numberList){
let list = JSON.parse(numberList);
let obj = list.find(item => item.url == this.fileData.url);
if(obj){
this.pdfCurrentPage = obj.page;
}
list.forEach(function (element) {
if(element.url == currentPdfUrl){
element.page = currentPageNumber;
}
});
}
},
复制代码