使用pdf.js遇到的问题及解决方案

目的：1.实现pdf预览  2.实现预览指定页码pdf  3.实现监听pdf的页码变化的值

引用 了PDF.js，地址github链接https://github.com/mozilla/pdf.js

第一步第二步有借用 原文链接 https://blog.csdn.net/weixin_34409357/article/details/88495734

第三步实现有参照 原文链接https://blog.csdn.net/hjxdreamer/article/details/86082656，但是发现不能页码结果不准确，于是自己在源码中找到了更好的方式、位置。

使用步骤及实现步骤：

需要修改、扩展的文件  PDF.js--->web--->viewer.html与viewer.js

• 我选择了iframe实现，还有其它方式，可以进github仔细阅读

  • file后面是你的pbf路径，我是本地测试了一个css.psf

  • page后面可以你指定的页码page

  • zoom是放大倍数

  <iframe style="width: 100%;min-height: 70vh;"  src="/static/plugin/PDF.js/web/viewer.html?file=/static/plugin/CSS.pdf&page='+page+'&zoom=2"></iframe>

• 在viewer.js内找到代码段 

  if (!this.pdfViewer.currentScaleValue) {

  this.pdfViewer.currentScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;

  }在后面加上下面的代码，实现跳转指定页码

// 扩展  传入page
    var c_url=window.location.href;
		if(c_url.indexOf("&")&&c_url.indexOf("=")){
			var c_urlArray={}
			var c_val=c_url.split('?')[1];
			var c_valArray=c_val.split('&');
			for(let i=0;i<c_valArray.length;i++){
				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['zoom']){
				this.pdfViewer.currentScale=c_urlArray['zoom'];
			}
			if(c_urlArray['page']){
				document.getElementById('pageNumber').value = this.pdfViewer.currentPageNumber = c_urlArray['page']*1;
			}
			if(c_urlArray['top']){
				document.getElementById('viewerContainer').scrollTop=document.getElementById('viewerContainer').scrollTop+c_urlArray['top']*1;
			}
		}

• 实现监听pdf的页码变化的值

• 在viewer.html 末尾写一个函数 接收页码值 及 回调函数传值父页面

 <script>
      function getCurrentPageNum(value){
        window.parent.page_return_call( value );
      }
    </script>

• 在viewer.js内找到代码段  _this._currentPageNumber = evt.pageNumber; 在后面加上  

 // console.log(evt.pageNumber,'这是变化的页码');
        getCurrentPageNum(evt.pageNumber)

• 在你放置ifram的父页面定义回调函数，可以获取当前pdf跳转后的页码

// 回调pdf内变化的 页码
function page_return_call(pageNum){
	// pageNum  当前pdf页码
}

以上是在使用pdf.js做项目的总结，转载请带上我的原文链接，谢谢，码字不易。