使用 JavaScript 突出显示 PDF 中的特定文本

Highlighting specific text in PDF using JavaScript

提问人:expertland 提问时间:11/17/2023 最后编辑:Scott Hunterexpertland 更新时间:11/17/2023 访问量:33

问:

我创建了一个应用程序,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 数据
=> 是我想突出显示
的文本部分 => 是我希望它滚动的页码(它完美地到达那里)
searchResultsrefPage

代码中有任何问题,或者有任何其他解决方案吗?

JavaScript Python

评论

1赞 Scott Hunter 11/17/2023
格式化的发布代码难以辨认。
0赞 expertland 11/17/2023
改进了格式

答: 暂无答案