如何使用注释在 Syncfusion React PDF 视图中设置边界

Question

我有一个 Syncfusion React PDF 查看器，并使用 Azure 认知服务执行 OCR。

当用户在 PDF 文件中搜索时，Azure 服务将返回边界。使用这些边界，我需要突出显示 PDF 文件中的文本。 我在下面分享了我从 Azure 认知服务获得的回复。

如何使用这些边界突出显示 PDF 文件中的文本？

  {
    "docs": [
        {
            "id": null,
            "fileName": "sample.pdf",
            "pages": [
                {
                    "id": 0,
                    "box": "0 0 1224 1584",
                    "words": [
                        {
                            "id": 42,
                            "text": "patient",
                            "box": "366 156 403 169"
                        },
                        {
                            "id": 1258,
                            "text": "Patient",
                            "box": "35 1373 83 1386"
                        }
                    ]
                },
                {
                    "id": 1,
                    "box": "0 0 1224 1584",
                    "words": [
                        {
                            "id": 11,
                            "text": "Patient:",
                            "box": "98 124 179 146"
                        }
                    ]
                }
            ]
        }
    ]
}

Answer 1

下面的示例 JavaScript 代码适用于表示您要突出显示的单词和页面的 JSON 数据。

highlightPDFFromJSON

函数用于根据提供的JSON数据突出显示PDF中的单词。提供了一个 JSON 对象 (

jsonData

)，其中包含有关每个页面上要突出显示的单词的信息。

调用函数代码后使用下面的示例函数。

const { PDFDocument, rgb } = require('pdf-lib');
const fs = require('fs').promises;
const axios = require('axios');

async function downloadPDF(url, outputPath) {
    const response = await axios.get(url, { responseType: 'arraybuffer' });
    await fs.writeFile(outputPath, Buffer.from(response.data));
}

async function highlightPDFFromJSON(inputPath, outputPath, jsonData) {
    try {
        // Read the existing PDF
        const pdfBytes = await fs.readFile(inputPath);

        // Load the PDF
        const pdfDoc = await PDFDocument.load(pdfBytes);

        // Loop through each page in the JSON data
        for (const pageData of jsonData.docs[0].pages) {
            const page = pdfDoc.getPages()[pageData.id];

            // Loop through words on the page and highlight their boxes
            for (const word of pageData.words) {
                const box = word.box.split(' ').map(parseFloat); // Parse box coordinates

                // Draw rectangle for word highlight
                page.drawRectangle({
                    x: box[0],
                    y: box[1],
                    width: box[2] - box[0],
                    height: box[3] - box[1],
                    color: rgb(1, 1, 0), // Yellow color for highlight
                    opacity: 0.5, // 50% opacity
                    borderColor: rgb(0, 0, 0), // Black border
                    borderWidth: 0.5, // Border width
                });
            }
        }

        // Save the modified PDF
        const modifiedPdfBytes = await pdfDoc.save();

        // Write the modified PDF to a new file
        await fs.writeFile(outputPath, modifiedPdfBytes);

        console.log('PDF with highlight annotations saved successfully!');
    } catch (error) {
        console.error('Error:', error);
    }
}

// Example usage
const url = ' ';
const inputPath = 'Document1.pdf'; // Path to save the downloaded PDF file
const outputPath = 'output.pdf'; // Path to save the output PDF file
const jsonData = {
    "docs": [
        {
            "id": null,
            "fileName": "sample.pdf",
            "pages": [
                {
                    "id": 0,
                    "box": "0 0 1224 1584",
                    "words": [
                        {
                            "id": 42,
                            "text": "patient",
                            "box": "366 156 403 169"
                        },
                        {
                            "id": 1258,
                            "text": "Patient",
                            "box": "35 1373 83 1386"
                        }
                    ]
                },
                {
                    "id": 1,
                    "box": "0 0 1224 1584",
                    "words": [
                        {
                            "id": 11,
                            "text": "Patient:",
                            "box": "98 124 179 146"
                        }
                    ]
                }
            ]
        }
    ]
};

downloadPDF(url, inputPath)
    .then(() => highlightPDFFromJSON(inputPath, outputPath, jsonData))
    .catch(error => console.error('Error downloading PDF:', error));

输出：