Angular实现文档查看器拖入预定义对象并获取相对坐标方案咨询

文档渲染适配 #

• PDF格式：直接使用Angular生态的ng2-pdf-viewer组件，底层基于PDF.js实现，渲染时可直接获取PDF原始页的宽高参数，同时支持自定义缩放比例适配不同屏幕尺寸。
• Word格式：优先选择后端预先将Word文档转换为PDF格式，和PDF共用一套渲染逻辑，避免多格式坐标适配成本；如果要前端直接渲染，可以使用mammoth.js将Word转换为固定等比例的HTML内容，锁定排版宽高比。

拖拽功能实现 #

直接使用Angular官方维护的@angular/cdk/drag-drop能力实现预定义对象的拖拽：

• 给文档渲染容器设置position: relative属性，所有可拖拽的签名、控件等元素设置position: absolute挂载在容器下
• 给拖拽元素添加cdkDragBoundary属性绑定文档容器选择器，限制拖拽范围仅在文档区域内

固定坐标计算逻辑（不受缩放影响） #

核心逻辑是将拖拽坐标换算为原始文档的比例/绝对坐标，而非基于屏幕的像素坐标：

1. 文档渲染完成后记录两个固定参数：originalDocWidth（原始文档的标准宽度）、originalDocHeight（原始文档的标准高度）
2. 每次容器尺寸变化、缩放调整时，记录当前渲染容器的实际展示宽高：renderedWidth、renderedHeight
3. 点击获取坐标时，先读取拖拽元素相对于渲染容器的左上角像素坐标(clientX, clientY)，按以下公式换算为原始文档坐标：

originalX = clientX * (originalDocWidth / renderedWidth)
originalY = clientY * (originalDocHeight / renderedHeight)

该换算结果和屏幕尺寸、缩放比例完全无关，同一文档位置返回的坐标值固定。如果是多页文档，额外记录元素所在的页码即可。

内容的提问来源于stack exchange，提问作者user312642