react-pdf导入TextLayer.css报错，PDF文本无法选中求助

原因分析 #

在react-pdf v5.x版本中，TextLayer.css和AnnotationLayer.css的正确路径并非react-pdf/dist/esm/Page/——该路径是v6+版本的文件结构。v5版本的CSS文件直接位于react-pdf/dist/Page/目录下，因此你当前的导入路径会触发模块找不到的错误。

解决方案 #

1. 修正CSS文件导入路径 #

将原有的CSS导入代码替换为：

import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

2. 确认Page组件核心配置 #

确保Page组件的renderTextLayer属性设为true（你已正确设置），这是文本层渲染、实现文本选中功能的关键开关：

<Page renderTextLayer={true} renderMode="svg" pageNumber={pageNumber} />

修改后的完整代码 #

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

function News(props) {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  const goToPrevPage = () =>
    setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);

  const goToNextPage = () =>
    setPageNumber(
      pageNumber + 1 >= numPages ? numPages : pageNumber + 1,
    );

  return (
    <div>
      <nav>
        <button onClick={goToPrevPage}>Prev</button>
        <button onClick={goToNextPage}>Next</button>
        <p>
          Page {pageNumber} of {numPages}
        </p>
      </nav>

      <Document
        file="document.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page renderTextLayer={true} renderMode="svg" pageNumber={pageNumber} />
      </Document>
    </div>
  );
}

额外注意事项 #

• 确保你的webpack配置中包含css-loader和style-loader，以正确解析加载CSS文件。若未配置，先安装依赖：

  npm install css-loader style-loader --save-dev
  

  再在webpack配置中添加规则：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
  

内容的提问来源于stack exchange，提问作者Newbie_developer