ReactJS员工注册页面PDF文档加载失败问题求助

以下是针对你代码中问题的分步解决方案：

1. 补充缺失的状态与核心函数 #

代码中使用了pageNumber、onDocumentLoadSuccess和handleDocumentAcknowledgement，但这些变量和函数未定义，这是页面报错的直接原因之一。添加以下代码到组件内：

const [pageNumber, setPageNumber] = useState(1);
const [numPages, setNumPages] = useState(null);

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

const handleDocumentAcknowledgement = () => {
  setUserData({ ...userData, documentAcknowledged: true });
};

2. 修正PDF文件路径 #

React项目中静态资源需按规范放置：

• 若将PDF放在public/Docs/test.pdf，使用绝对路径：

<Document
  file="/Docs/test.pdf"
  onLoadSuccess={onDocumentLoadSuccess}
>
  <Page pageNumber={pageNumber} />
</Document>

• 若PDF在src目录下，通过import引入后使用：

import testPdf from './Docs/test.pdf';

// 组件内使用
<Document file={testPdf} onLoadSuccess={onDocumentLoadSuccess}>
  <Page pageNumber={pageNumber} />
</Document>

3. 配置PDF.js Worker（react-pdf v3+必备） #

react-pdf v3及以上版本需要手动配置Worker，否则会加载失败。在组件顶部添加：

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

4. 修复表单输入绑定错误 #

PF UAN输入框的value绑定错误，修正为：

<input
  type="number"
  name="pfUAN"
  value={userData.pfUAN}
  onChange={handleInputChange}
/>

修正后的核心代码片段 #

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-datepicker/dist/react-datepicker.css';

// 配置PDF Worker
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

function EmployeeRegistration() {
  const [userData, setUserData] = useState({
    fullName: '',
    gender: '',
    aadhaarNumber: '',
    dateofBirth: null,
    maritalStatus: '',
    emergencyContactName: '',
    address: '',
    phoneNumber: '',
    emailID: '',
    emergencyContactNumber: '',
    jobTitle: '',
    departmentName: '',
    joiningDate: '',
    employmentType: '',
    education: [],
    workExperience: [],
    relevantSkills: '',
    pfUAN:'',
    esiNO:'',
    documentAcknowledged: false,
  });
  const [pageNumber, setPageNumber] = useState(1);
  const [numPages, setNumPages] = useState(null);

  // 原有处理函数...

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

  const handleDocumentAcknowledgement = () => {
    setUserData({ ...userData, documentAcknowledged: true });
  };

  return (
    <div>
      <form>
        {/* 原有表单内容... */}
        <label>
          PF UAN number:
          <input
            type="number"
            name="pfUAN"
            value={userData.pfUAN}
            onChange={handleInputChange}
          />
        </label>
        <br />
        <label>
          ESI Number:
          <input
            type="number"
            name="esiNO"
            value={userData.esiNO}
            onChange={handleInputChange}
          />
        </label>
        <br />
        <div>
          <h3>Document</h3>
          <Document
            file="/Docs/test.pdf"
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} />
          </Document>
          <p>Page {pageNumber} of {numPages}</p>
          {!userData.documentAcknowledged && (
            <button type="button" onClick={handleDocumentAcknowledgement}>
              Acknowledge Document
            </button>
          )}
        </div>
        <button type="submit" className="btn btn-default btn-sm">Submit</button>
      </form>
    </div>
  );
}

export default EmployeeRegistration;

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