使用react-pdf (@react-pdf/renderer)在浏览器中以blob数据的模式显示PDF

Question

我正在使用方便的React -pdf库来渲染/显示/下载我的React站点中的pdf。我把PDF文件存到服务器上了。我有一个对服务器的调用，它以blob形式发送回PDF。现在我想在用户单击链接时在浏览器中以模态显示该PDF。我在他们的网站https://react-pdf.org/上找不到具体的例子。我不确定我是否应该使用PDFViewer, https://react-pdf.org/components#pdfviewer或BlobProvider, https://react-pdf.org/components#blobprovider

我相信这是一个相当容易的任务，但我就是找不到任何好的例子。

我觉得最接近的例子来自他们的网站:

import { BlobProvider, Document, Page } from '@react-pdf/renderer';
const MyDoc = (
<Document>
<Page>
// My document data
</Page>
</Document>
);
const App = () => (
<div>
<BlobProvider document={MyDoc}>
{({ blob, url, loading, error }) => {
// Do whatever you need with blob here
return <div>There's something going on on the fly</div>
}}
</BlobProvider>
</div>
);

Answer 1

我试图实现同样的目标(通过我自己的模态)，它花了我一段时间让它工作。我使用了react-pdf和pdfjsWorker(呈现PDF所需)。主'监视':使用pdf worker，并在返回中包含pageNumber属性。

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

import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

这一行是pdf worker(在React组件中)所必需的:

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

首先，我将blob转换为base64String，删除开头的附加数据，并将其设置为状态。我还使用state作为页码:

const [pdfString, setPdfString] = useState('');
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
const onDocumentLoadSuccess = ({ numPages }) => {
setNumPages(numPages);
};
let base64String;
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
base64String = reader.result;
setPdfString(base64String.substr(base64String.indexOf(',') + 1));
};

那么返回值看起来像这样:

<PreviewContainer>
<Document
file={`data:application/pdf;base64,${pdfString}`}
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
</PreviewContainer>

此外，页码状态由handleOnClick函数控制，我在PreviewContainer中添加了'next'和'previous'按钮。

一些有用的链接:

• https://projects.wojtekmaj.pl/react-pdf/
• https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions(包含一个测试base64字符串-在故障排除时很棒!)
• https://www.geeksforgeeks.org/how-to-convert-blob-to-base64-encoding-using-javascript/

Answer 2

我最近遇到了这个问题，下面是我的解决方法:

<Document></Document>组件期望从给定的url得到一个文件，传递文件的一种方法是将blob内容转换为url对象。您可以使用window.URL.createObjectURL(blobContent)并将其传递给Document组件，如下所示:

<Document 
file={window.URL.createObjectURL(blobContent)}
>
<Page pageNumber={pageNumber} />   
</Document>

此外，你也可以使用usePDF从客户端渲染你的pdf，并生成一个blob，然后你可以传递给你的模式，也更新它，如果你需要(https://react-pdf.org/advanced有一个使用这个钩子的例子)。