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

Question

有人知道任何网站提供了如何使用pdf.js获取pdf文件中URL链接坐标的完整示例吗？

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

---

我需要以下数据

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

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

谢谢。

Answer 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>