如何获取PDF页面点击坐标？ngx-extended-pdf-viewer及替代库咨询

一、使用ngx-extended-pdf-viewer实现点击坐标获取 #

完全可以实现，这个库内置了页面点击事件，直接就能拿到精准的坐标：

• 绑定(pageClick)事件：在组件模板中给<ngx-extended-pdf-viewer>添加该事件，事件参数会返回点击的页码、相对页面左上角的x/y坐标。
• 示例代码：
  模板部分：

<ngx-extended-pdf-viewer 
  [src]="yourPdfUrl" 
  (pageClick)="onPageClick($event)"
></ngx-extended-pdf-viewer>

组件类部分：

onPageClick(event: any) {
  const clickData = {
    pageNumber: event.pageNumber,
    x: event.x,
    y: event.y
  };
  // 将clickData发送至后端处理
}

二、其他可选的PDF查看器库 #

如果不想用ngx-extended-pdf-viewer，这些库也能轻松获取点击坐标：

• pdf.js：Mozilla官方的底层PDF渲染库，直接监听PDF渲染的canvas元素点击事件，结合当前页面的缩放比例、偏移量，计算出相对PDF页面的坐标。
• ng2-pdf-viewer：基于pdf.js的Angular封装库，通过绑定点击事件，配合视图的缩放参数转换，也能得到准确的页面坐标。

三、支持添加可保存编辑文本域的库 #

• ngx-extended-pdf-viewer：不仅能获取坐标，还支持直接添加可编辑文本域，并且修改后的PDF可以保存为包含可编辑表单域的文件。你可以调用库的addAnnotation方法，传入之前获取的坐标、页码、文本域大小等参数，生成的文本域支持后续编辑，保存后属性不会丢失。
• pdf-lib：一个轻量的PDF操作库，可直接在PDF文件中插入可编辑的文本域。配合前端获取的点击坐标，不管是前端直接修改还是传给后端处理，都能生成带可编辑文本域的PDF文件。

内容的提问来源于stack exchange，提问作者Manuel Brás