主要思路就是修改pdfjs-dist源码,然后自己部署。在此次修改中,主要涉及两个问题需要注意:
- iframe跨域
- 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!!!搞定!