pdfjs中textlayer的样式

Question

我正在使用 pdfjs 库，并在渲染文本层时遇到这个问题。文本图层中的文本与画布中的内容不同。我该如何解决这个问题？我看到textlayer渲染参数中有textDiv和textDivProperties，它们在这种情况下发挥了一些作用吗？

这是我的代码

// elements code
              const canvasElement = document.createElement("canvas")
              const textLayer = document.createElement("div");
              textLayer.id = `textlayer-${index}`;
              textLayer.style.position = "absolute";
              const canvasWrapper = document.createElement("div")
              canvasWrapper.style.width = "800px"
              canvasWrapper.appendChild(canvasElement)
              canvasWrapper.appendChild(textLayer)
              canvasWrapper.id = `page-${index}`
              canvasWrapper.style.marginTop = "2px";
              canvasWrapper.style.marginBottom = "2px";
              container.appendChild(canvasWrapper);


// render code
                 const renderContext = {
                    canvasContext: canvas.getContext('2d'),
                    viewport: viewport,
                    annotationMode: AnnotationMode.ENABLE_FORMS,
                    annotationCanvasMap: annotationCanvasMap
                  };
        
                  page.render(renderContext as RenderParameters).promise.then(() => {
                    return page.getTextContent({includeMarkedContent: true, disableNormalization: true});
                  }).then((textContent) => {
                    const textLayer = document.getElementById(`textlayer-${index}`);
                    if(textLayer == null) return;
                    textLayer.style.left = canvas.offsetLeft + 'px';
                    textLayer.style.top = canvas.offsetTop + 'px';
                    textLayer.style.height = canvas.offsetHeight + 'px';
                    textLayer.style.width = canvas.offsetWidth + 'px';
                    
                    pdfjs.renderTextLayer({
                      textContentSource: textContent,
                      textContent: textContent,
                      container: textLayer!,
                      viewport: viewport,
                      textDivs: []
                    } as TextLayerRenderParameters);
                  });
                   if(isGettingURL == true) {
                    updateIsGetting(false);
                  }

Answer 1

最近遇到过这个问题，结果你只需要给你的textlayer元素一个类名

.textLayer

然后从

pdf_viewer.css

导入

pdfjs-dist/web/

导入CSS（我这里用的是SCSS）

<style lang="scss">
@use "pdfjs-dist/web/pdf_viewer.css"
...
</style>

然后添加类名

// Element Code
        const textLayer = document.createElement("div");
        textLayer.id = `textlayer-${index}`;
        textLayer.classList.add("textLayer")

以下是所使用样式的摘录：

.textLayer{
  position:absolute;
  text-align:initial;
  inset:0;
  overflow:hidden;
  opacity:0.25;
  line-height:1;
  -webkit-text-size-adjust:none;
     -moz-text-size-adjust:none;
          text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  z-index:2;
}

.textLayer :is(span, br){
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
  }

.textLayer span.markedContent{
    top:0;
    height:0;
  }

.textLayer .highlight{
    --highlight-bg-color:rgb(180 0 170);
    --highlight-selected-bg-color:rgb(0 100 0);

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    border-radius:4px;
  }

@media screen and (forced-colors: active){

.textLayer .highlight{
      --highlight-bg-color:Highlight;
      --highlight-selected-bg-color:ButtonText;
  }
    }

.textLayer .highlight.appended{
      position:initial;
    }

.textLayer .highlight.begin{
      border-radius:4px 0 0 4px;
    }

.textLayer .highlight.end{
      border-radius:0 4px 4px 0;
    }

.textLayer .highlight.middle{
      border-radius:0;
    }

.textLayer .highlight.selected{
      background-color:var(--highlight-selected-bg-color);
    }

.textLayer ::-moz-selection{
    background:blue;
    background:AccentColor;
  }

.textLayer ::selection{
    background:blue;
    background:AccentColor;
  }

.textLayer br::-moz-selection{
    background:transparent;
  }

.textLayer br::selection{
    background:transparent;
  }

.textLayer .endOfContent{
    display:block;
    position:absolute;
    inset:100% 0 0;
    z-index:-1;
    cursor:default;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }

.textLayer .endOfContent.active{
      top:0;
    }

注意，pdf_viewer.css还包含注释和xfa图层

的样式