关于pdfjs遇到的问题！(语言-javascript)

Question

背景： 使用vite+pdfjs-dist@2.0.943实现pdf在线操作
问题1：在渲染textLayer文本层的时候，如果pdf是纯英文，则渲染出来的文本是一行的内容；如果pdf是中文+英文，渲染内容是每个字符一个节点
纯英文

中文+英文

问题2：在中文+英文的时候，使用findController实现了搜索和高亮，但在纯英文时，因为节点变了，_pageMatches的东西匹配不上了
问题3：实在是不知道怎么实现批注功能
问题4：如何选取段落

希望能够得到帮助，项目地址

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

问题1：文本层渲染问题

问题描述：在渲染textLayer文本层的时候，如果PDF是纯英文，则渲染出来的文本是一行的内容；如果PDF是中文+英文，渲染内容是每个字符一个节点。

可能原因：这可能是由于PDF.js在处理中文文本时的默认行为。中文字符在PDF中通常被视为单独的文本元素。

解决方案：

1. 自定义文本渲染：可以通过自定义文本层的渲染逻辑来解决这个问题。例如，可以使用TextLayerBuilder来处理文本渲染。
2. 检查配置：查看是否有配置选项可以控制文本渲染方式。

示例代码：

import { pdfjsLib } from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
  const page = pdf.getPage(1);
  page.then(page => {
    const scale = 1.5;
    const viewport = page.getViewport({ scale });
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport,
      transform: [scale, 0, 0, scale, 0, 0],
    };

    const textLayer = new TextLayerBuilder({
      textLayerDiv: document.getElementById('text-layer'),
      pageIndex: 1,
      renderInteractiveForms: false,
    });

    const textContent = page.getTextContent();
    textLayer.setTextContent(textContent);
    textLayer.render(renderContext);

    document.body.appendChild(canvas);
  });
});

问题2：搜索和高亮问题

问题描述：在中文+英文的时候，使用findController实现了搜索和高亮，但在纯英文时，因为节点变了，_pageMatches的东西匹配不上了。

可能原因：findController可能依赖于特定的文本节点结构来执行搜索和高亮，当结构变化时，原有的匹配逻辑不再适用。

解决方案：

1. 修改findController：可能需要修改findController的实现，使其能够适应不同的文本节点结构。
2. 编写预处理函数：编写一个预处理函数，将文本转换为findController可以识别的格式。

示例代码：

import { pdfjsLib } from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
  const findController = new pdfjsLib.FindController({
    linkService: new pdfjsLib.DefaultLinkService(),
    eventBus: new pdfjsLib.EventBus(),
  });

  const matches = findController.execute({
    pages: [1],
    query: 'example',
    caseSensitive: false,
    findPrevious: false,
    highlightAll: true,
  });

  matches.promise.then(matches => {
    console.log(matches);
  });
});

问题3：批注功能实现

问题描述：实在是不知道怎么实现批注功能。

解决方案：

1. 查阅PDF.js文档：了解如何添加注释。
2. 设计用户界面：设计一个用户界面来添加批注。

示例代码：

import { pdfjsLib } from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
  const page = pdf.getPage(1);
  page.then(page => {
    const annotations = page.getAnnotations({ intent: 'display' });
    annotations.then(annotations => {
      console.log(annotations);
    });
  });
});

问题4：段落选择

问题描述：如何选取段落。

解决方案：

1. 解析PDF文本流：分析PDF文档的文本流，并确定段落的边界。
2. 实现选择逻辑：提供一种方式让用户选择这些段落。

示例代码：

import { pdfjsLib } from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
loadingTask.promise.then(pdf => {
  const page = pdf.getPage(1);
  page.then(page => {
    const textContent = page.getTextContent();
    const paragraphs = textContent.items.reduce((acc, item) => {
      if (item.str) {
        acc.push(item.str);
      }
      return acc;
    }, []);

    console.log(paragraphs);
  });
});

项目地址

您可以访问https://gitee.com/echopp/pdfjs.git查看项目代码。

希望这些解决方案能够帮助您解决问题。如果需要更详细的代码示例或步骤，建议您提供更多的代码上下文或具体的错误信息。