提问人:expertland 提问时间:11/17/2023 最后编辑:Scott Hunterexpertland 更新时间:11/17/2023 访问量:33
使用 JavaScript 突出显示 PDF 中的特定文本
Highlighting specific text in PDF using JavaScript
问:
我创建了一个应用程序,AI 代理可以在其中搜索来自不同来源的信息。其中一个来源是 PDF 文档,它们存储在 MySQL 数据库中(类型为 longblob)。如果代理人在文件中发现任何内容,我必须出示参考资料。我从数据库中完全获取这些文档,并尝试突出显示文本的特定部分来显示它们。
我能够在 Python 代码中从 MySQL 获取文档,然后使用 JavaScript 显示它们。PDF 显示完美,但我在尝试突出显示文本时遇到了一个问题。我知道这并不难,但我无法确切地弄清楚问题所在。由于我是 AI 专家而不是 JavaScript 专家,因此我无法准确识别问题。但是,我的客户希望我修复它,因此任何帮助都不胜感激。
这是我用于获取 PDF 文档的 python 代码:
cursor = db_connection.cursor()
cursor.execute("SELECT pdf_data FROM pdf_documents WHERE title = %s", (pdf_id,))
pdf_data = cursor.fetchone()
pdf_data = pdf_data[0]
pdf_data_base64 = base64.b64encode(pdf_data).decode('utf-8')
而且,这是我的 JavaScript 函数,用于显示突出显示特定文本的 PDF 文档:
async function displayPDFWithHighlight(pdfData, searchResults, refPage) {
const pdfContainer = document.getElementById('pdf-container');
pdfContainer.innerHTML = '';
const pdf = await pdfjsLib.getDocument({ data: atob(pdfData) }).promise;
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const canvas = document.createElement('canvas');
pdfContainer.appendChild(canvas);
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1.0 });
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({ canvasContext: context, viewport: viewport });
if (pageNum === refPage) {
const textContent = await page.getTextContent();
const textLayer = document.createElement('div');
textLayer.className = 'textLayer';
pdfContainer.appendChild(textLayer);
for (let i = 0; i < textContent.items.length; i++) {
const item = textContent.items[i];
const text = item.str;
if (text.includes(searchResults)) {
const textDiv = document.createElement('div');
textDiv.textContent = text;
textDiv.style.left = '${item.transform[4] / viewport.scale}px';
textDiv.style.top = '${item.transform[5] / viewport.scale}px';
textDiv.style.fontSize = '${item.transform[0] / 10}px';
textDiv.style.backgroundColor = 'yellow';
textDiv.style.position = 'absolute';
textDiv.style.opacity = '0.5';
textLayer.appendChild(textDiv);
}
}
}
}
if (refPage > 1 && refPage <= pdf.numPages) {
const targetCanvas = pdfContainer.children[refPage - 1];
targetCanvas.scrollIntoView({ behavior: 'smooth' });
targetCanvas.classList.add('highlighted-page');
}
}
=>pdfData
包含 base64 编码的 PDF 数据
=> 是我想突出显示
的文本部分 => 是我希望它滚动的页码(它完美地到达那里)searchResults
refPage
代码中有任何问题,或者有任何其他解决方案吗?
答: 暂无答案
评论