pdfjs-dist的进阶使用:手动触发pdf文件跳转到指定页码-实现

时间:2024-04-29 07:32:16

主要思路就是修改pdfjs-dist源码,然后自己部署。在此次修改中,主要涉及两个问题需要注意:

  1. iframe跨域
  2. pdfjs-dist源码阅读

父组件

在需要触发页面跳转的位置,使用以下代码:

// 获取嵌入pdfjs服务的iframe
const frame = document.getElementById('pdf-container')

// 使用postMessage向pdfjs服务发送消息

// 向pdf发送的数据
const sendData = {
	page: currentPage.value,
	origin: window.location.origin
}
// pdfjs-dist部署的域名
const pdfServer = 'http://xxxxx.amazonaws.com'
frame?.contentWindow?.postMessage(sendData , pdfServer )

子组件:pdfjs-dist

indWindowEvents()方法中,添加以下监听:

// 接收来自父组件的消息
window.addEventListener(
   "message",
   event => {
     console.log("???? event = ", event);
     const { data, origin } = event;
     // 判断:当域名相同时才触发下列动作
     if (origin === data.origin) {
     
     	// 从父组件传来的数据中获取page
       let page = data.page;

       if (page === null || page === "" || page > this.toolbar.pagesCount) {
         page = 1;
       }
       document.getElementById("pageNumber").value = page * 1;
       
       this.pdfViewer.currentPageNumber = page * 1;
       
       this.toolbar?.setPageNumber(page * 1, page * 1);
       
       this.secondaryToolbar?.setPageNumber(page * 1);
     }
   },
   { signal }
 );

DONE!!!搞定!