React-pdf: 마크 태그를 사용하여 주석 레이어에서 텍스트를 강조 표시하려고 할 때 이상한 글꼴 동작.

기술

마크 태그를 사용하여 주석 레이어에서 텍스트를 강조 표시하려고 할 때 이상한 글꼴 동작.

react-bootstrap 모달 대화 상자에 pdf를 표시하고 있습니다. 페이지 구성 요소의 customTextRenderer 소품을 사용하여 페이지에서 검색어를 강조 표시하려고합니다. 강조 표시된 텍스트는 올바른 위치가 아닌 다른 글꼴로 렌더링됩니다.

재현 단계

동작을 재현하는 단계 :
코드는 다음과 같습니다.

<Modal show={this.state.showPDF}

    onHide={this.handleClose} dialogClassName="modal-100w">
    <Modal.Header closeButton>
    </Modal.Header>
    <Modal.Body style={{margin: "auto"}}>
    <Document file={this.state.pdfURL} onLoadSuccess={(page) => this.onDocumentLoadSuccess(page)}>
        <Page  renderMode="svg" scale={1.0} pageNumber={1} customTextRenderer={(textItem) => this.customTextRenderer(textItem)} onLoadSuccess={(page) => this.onPageLoadSuccess(page)} />
        </Document>
    </Modal.Body>
</Modal>

customTextRenderer 는 다음과 같습니다.

return textItem.str
              .split(this.terms[0])
              .reduce((strArray, currentValue, currentIndex) => (
                currentIndex === 0
                  ? ([...strArray, currentValue])
                  : ([...strArray, (
                    // eslint-disable-next-line react/no-array-index-key
                    <mark key={currentIndex}>
                      {this.terms[0]}
                    </mark>
                  ), currentValue])
    ), []);

    }

(주로 샘플 중 하나에서 가져온 것 같습니다.)

예상되는 행동

강조 표시된 텍스트 쇼는 동일한 위치, 동일한 글꼴 및 동일한 위치에 있어야합니다.

추가 정보
나는 svg와 canvas로 시도했지만 동일한 동작을 봅니다.

# 189에서도 동일한 동작이 발생했지만 해결 방법으로는 운이 없었습니다. 나는 또한 # 212를 보았다.

환경

• 브라우저 (해당되는 경우) [예 : Chrome 57, Firefox 59] : Firefox에서 두 가지 최신 Chrome을 테스트했습니다. 동작은 둘 다에서 결함이 있습니다.
• React-PDF 버전 [예 : 3.0.4] :
• React 버전 [예 : 16.3.0] :
• Webpack 버전 (해당하는 경우) [예 : 4.16.2] :