使用 PDF.js ，是不是可以从 pdf 文件中获取链接 URL 及其相对坐标（ X_Y || top_left 的位置）？

Posted 2023-03-24

【中文标题】使用 PDF.js ，是不是可以从 pdf 文件中获取链接 URL 及其相对坐标（ X_Y || top_left 的位置）？

【英文标题】：Using PDF.js , Is it possible to get link URLs' and its relative coordinates ( positions of X_Y || top_left ) from a pdf file?使用 PDF.js ，是否可以从 pdf 文件中获取链接 URL 及其相对坐标（ X_Y || top_left 的位置）？

【发布时间】：2022-01-03 16:41:00

【问题描述】：

有谁知道任何网站有一个完整的例子，说明如何使用 PDF.js 获取放在 pdf 文件中的 URL 链接的坐标？

https://mozilla.github.io/pdf.js/

---

我需要以下数据。

每个链接的链接 URL。 每个链接的XY坐标。 页面大小。 页面的 ID 或名称。

我想将这些链接放在（悬停）在使用 pdf.js 提取的 jpg 图像上。 要计算链接的放置位置，我需要它的坐标。

谢谢。

【参考方案1】：

这里我只是提取链接，如果需要，您可以从pdfDocument获取更多信息。

我正在使用linkify 来帮助解析链接字符串。

const input = document.getElementById('fileSelector');
const readFile = ()=> 
  const file = input.files[0];
  const reader = new FileReader();
  reader.addEventListener('load', readPDF);
  reader.readAsArrayBuffer(file);
;
const readPDF = async (event)=> 
  const typedarray = new Uint8Array(event.target.result);
  const loadingTask = pdfjsLib.getDocument(typedarray);
  const pdfDocument = await loadingTask.promise;
  for (let pageNum=1; pageNum<=pdfDocument.numPages; pageNum++) 
    readPage(pdfDocument, pageNum);
  
;
const readPage = async (pdfDocument, pageNum)=> 
  const page = await pdfDocument.getPage(pageNum);
  const textContent = await page.getTextContent();
  for (let item of textContent.items) 
    const links = linkify.find(item.str);
    for (let link of links) appendLink(link);
  
;
const appendLink = (link)=> 
  const list = document.getElementById('list');
  const a = document.createElement('a');
  a.href = link.href;
  a.textContent = link.value;
  list.appendChild(a);

input.addEventListener('change', readFile);

a  display: block 

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/linkifyjs@3.0.3/dist/linkify.min.js"></script>
<input type="file" accept=".pdf" id="fileSelector">
<div id="list"></div>