2022年的第一篇--pdf.js 缓存当前阅读页码，再次进入时，跳转到该页码继续预览

最近，遇到一个这样的需求：

pdf预览界面，缓存原文的当前页码，再次进入时，跳转到该页码继续预览。

如果需要统计pdf阅读进度，需要修改源码，把当前阅读页码存到缓存中的数据记录给页面，这样就可以实现统计进度了。

修改pdf.js源码后，顺利的解决了。

第一步，pdf.js封装到一个组件里面

我把pdf.js放在静态资源文件夹下，这个pdf.js可以去官网下载。

传送门：

mozilla.github.io/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;
      }
    });
  }
},
复制代码