将 HTML 中的绝对位置（顶部和左侧）转换为 PDF 中的位置答案

【问题标题】：Convert an absolute location (top and left) in HTML to a location in PDF将 HTML 中的绝对位置（顶部和左侧）转换为 PDF 中的位置
【发布时间】：2022-09-27 22:07:10
【问题描述】：

语境：我使用 PDF.js 以原始大小将 pdf 渲染到画布中，我还使画布的容器与画布大小相同，并且没有边框。在某个位置 [顶部，左侧]，我将一个具有绝对定位的文本元素放置在画布的容器内（在画布的顶部）并使用坐标，我想使用 pdf 在 pdf 上的相同位置呈现该文本-lib。

问题：由于某种原因，文本在 PDF 上呈现的位置与它在 HTML 中的绝对定位位置不同。我使用了这个公式：

pdfXLocation = elemLeftLocation;
pdfYLocation = PDFHeight - elemTopLocation;

左侧位置似乎在 HTML 和 PDF 之间正确对齐，但顶部位置有一些偏移，我似乎无法弄清楚它来自哪里（HTML/PDF？）。

F从我的研究，我知道 PDF.js 以 72DPI 渲染 pdf，并且我还以 1 的比例渲染它，这是 PDF 的原始大小，所以我无法弄清楚这个偏移量来自顶部位置.我还看到我不需要按 DPI 进行任何划分，因为 PDF.js 使用的 DPI 是转换为图像时 PDF 的标准 DPI。

请帮我弄清楚这个偏移量来自哪里以及如何将这些 HTML 坐标转换为 PDF 坐标。我在这个特定问题上花了大约 2 天时间。

Here\'s a repository I was using to test this on with this approach

谢谢

标签： reactjs pdf pdf.js coordinate-transformation pdf-lib.js

【解决方案1】：

更新：所以我发现，我没有将文本的高度添加到计算中，这是偏移的来源。

公式应该是这样的：

pdfXLocation = elemLeftLocation;
pdfYLocation = PDFHeight - (elemTopLocation + textHeight);

textHeight 是通过使用 pdf-lib 辅助函数测量特定大小的文本获得的。

【讨论】：