在 UInt8Array 的 React 中显示 PDF 时出现问题（react-pdf）

Question

我正在尝试在 React 中构建一个 PDF 查看器，我已经构建了后端来上传文件并获取缓冲区数据。 但是我在使用 react-pdf 时遇到了一些问题，因为我似乎无法提供正确类型的数据。 这是我写的代码：

const [data, setData] = useState();
  useEffect(() => {
    fetch("http://localhost:5000/files/pdf-test.pdf")
      .then((res) => res.text())
      .then((res) => setData(new Buffer(res, "binary")));
  });

  return (
    <>
      <Document file={{ data: data }} />
    </>
  );

这是我为数不多的尝试之一，在这个后端提供文件的二进制数据，如果我们控制台记录最后一个.then我们可以看到我正在为Document提供一个 UInt8Array，这是推荐数据格式：

除了图像中的代码，我还用二进制和 ArrayBuffer 尝试过，但仍然没有结果，同时更改了后端和前端代码。 我得到的错误是：

TL;DR ：我正在尝试使用他们的缓冲区在 React 中显示 PDF 个文件，但我无法做到。 我已经做了一个后端来上传文件（express-fileupload）并存储它们以便可以获取它们的数据。

谢谢你的帮助，我愿意接受其他解决问题的方法

Answer 1

对于 RCA (react-create-app)，您需要配置 worker 才能查看您的 PDF 文件。

import { Document, Page, pdfjs } from 'react-pdf';

然后像这样配置它：

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

用法：

const [uint8Arr, setUint8Arr] = useState();

function getUint8Array() {
 let reader = new FileReader();

            // reader.readAsDataURL(selectedFile); base64
            reader.readAsArrayBuffer(selectedFile);
            reader.onloadend = async (e) => {
                if ( e.target?.result instanceof ArrayBuffer) {
                    const uint8Array = new Uint8Array(e.target.result);
                    setUint8Arr(uint8Array) <---- 

                    // more callbacks(file.name, Buffer.from(new Uint8Array(target.result)));
                }
            };
}
<Document file={{
            data: uint8Arr <----
        }} onLoadSuccess={() => console.log('SUCCESS LOAD')}>
            <Page pageNumber={1} />
        </Document>

希望这能解决您的问题。