在 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>

希望這能解決您的問題。