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

链接

与此相关的文章地址：

• 纯前端实现了Excel文件转JSON和JSON转Excel下载
• 前端 使用 pdf.js加载PDF文件
• 前端使用pdf.js进行pdf文件预览的第二种方式：Viewer.html
• 通过pre标签进行json格式化展示，并实现搜索高亮和通过鼠标进行逐个定位的功能
• pdfjs-4.0.379-dist直接打开viewer.html报错

背景

通过前面几篇文章中的路线，其实已经实现了使用pdfjs-dist来预览PDF，它与我们通过pre标签等简单预览的直接区别就是：可以包含的功能比较多，如页面跳转、搜索、打开导航窗格等等，就是一个完整的pdf功能。

那么问题来了，在这个插件中进行页面跳转各种操作都行。现在需要在**外部来触发插件内部的事件，实现pdf文件的页面定位**。

举个例子就是：

<button>页面跳转</button>

<iframe id="pdf-container" url="http://pdf-server/show.pdf"></iframe>
1
2
3

iframe是用来承载pdf的容器，但是需要通过一个外部的button，来触发iframe内部的pdf文件翻页。

实现

主要思路就是修改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 )
1
2
3
4
5
6
7
8
9
10
11
12
13

子组件：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 }
 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

DONE！！！搞定！