是否有一个 React pdf 查看器，可以显示来自变量或任何其他硬编码源的 PDF 上的突出显示，而不是突出显示用户光标？

Question

我知道这个 React pdf 查看器也突出显示。这是演示：https://agentcooper.github.io/react-pdf-highlighter/ 这是github代码：https://github.com/agentcooper/react-pdf-highlighter

这是一个对象数组，其中每个对象都是一个亮点。示例对象：

{
      content: {
        text: " Type Checking for JavaScript",
      },
      position: {
        boundingRect: {
          x1: 255.73419189453125,
          y1: 139.140625,
          x2: 574.372314453125,
          y2: 165.140625,
          width: 809.9999999999999,
          height: 1200,
        },
        rects: [
          {
            x1: 255.73419189453125,
            y1: 139.140625,
            x2: 574.372314453125,
            y2: 165.140625,
            width: 809.9999999999999,
            height: 1200,
          },
        ],
        pageNumber: 1,
      },
      comment: {
        text: "Flow or TypeScript?",
        emoji: "🔥",
      },
      id: "8245652131754351",
    },

当您用鼠标突出显示时，这非常有用，但是当我想突出显示某个文本并且该文本来自硬编码变量、后端、API 或任何其他不使用光标的方式时，我怎样才能获得边界。可能吗？会不会很复杂？

是否有任何图书馆或现有项目已经做到了这一点，让生活变得更轻松？

Answer 1

可以在像react-pdf-highlighter这样的PDF查看器中以编程方式突出显示特定文本，但它需要提取文本并计算其在PDF上的位置（边界框）。由于react-pdf-highlighter已经支持通过其数据结构显示突出显示，因此挑战在于计算要突出显示的文本的边界框。

实现程序化突出显示的步骤 提取文本和位置：使用pdf.js的page.getTextContent()方法获取每个页面的文本内容。此方法提供有关每个文本元素的详细信息，包括其位置。

const page = await pdfDocument.getPage(pageNumber);
const textContent = await page.getTextContent();

// Extract text with positions
const textItems = textContent.items; // Array of text elements

搜索目标文本：将提取的文本与目标文本进行比较。确定比赛的开始和结束位置。

const targetText = "Type Checking for JavaScript";
const foundItem = textItems.find((item) => item.str.includes(targetText));

计算边界框：使用匹配的textItems元素的transform属性来计算文本的边界框。将这些数据合并到react-pdf-highlighter所需的RECT结构中。

const boundingBox = {
  x1: foundItem.transform[4], // Horizontal position
  y1: foundItem.transform[5], // Vertical position
  x2: foundItem.transform[4] + foundItem.width,
  y2: foundItem.transform[5] + foundItem.height,
};

const highlight = {
  content: { text: targetText },
  position: {
    boundingRect: boundingBox,
    rects: [boundingBox],
    pageNumber: pageNumber,
  },
  comment: {
    text: "Programmatically highlighted",
    emoji: "✨",
  },
  id: generateUniqueId(),
};

将突出显示添加到react-pdf-highlighter：将生成的突出显示对象传递给查看器的突出显示数组。