react-pdf 无法呈现 base64 PDF 数据，解释为十六进制字符串

Question

我正在尝试使用 react-pdf 库来显示 base64 编码的 PDF 文件。 B64 数据是准确的，因为它按如下方式加载到 iframe 中：

 <iframe
   className={css.previewIframe}
   src={`data:application/pdf;base64,${
     this.props.encodedPdf
   }`}
 />

但是，如果我将数据直接插入到 react-pdf 文档中，则会出现错误：

<Document file={this.props.encodedPdf} />

文档呈现错误消息 Failed to load PDF file.，并且控制台记录以下错误：InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}

我也收到很多警告，如下所示：Warning: Ignoring invalid character "109" in hex string

documentation 明确指出file prop可以是B64编码的内容。关于问题可能是什么的任何想法？如果需要，这里是 B64 数据：

JVBERi0xLjMKMSAwIG9iago8PAovS2lkcyBbIDMgMCBSIF0KL1R5cGUgL1BhZ2VzCi9Db3VudCAxCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9kdWNlciAoUHlQREYyKQo+PgplbmRvYmoKMyAwIG9iago8PAovQ29udGVudHMgNSAwIFIKL1JvdGF0ZSAwCi9UeXBlIC9QYWdlCi9SZXNvdXJjZXMgPDwKL1Byb2NTZXQgWyAvUERGIC9UZXh0IF0KPj4KL0Nyb3BCb3ggWyAwIDAgNjEyIDc5MiBdCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFsgMCAwIDYxMiA3OTIgXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0xlbmd0aCAxMAovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0KSIkCCDAAAAAAAQplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA2CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDY4IDAwMDAwIG4gCjAwMDAwMDAxMDggMDAwMDAgbiAKMDAwMDAwMDI3MyAwMDAwMCBuIAowMDAwMDAwMzIyIDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNgovUm9vdCA0IDAgUgovSW5mbyAyIDAgUgo+PgpzdGFydHhyZWYKNDAzCiUlRU9GCg==

如果我将 data:application/pdf;base64, 添加到字符串的开头，则不会出现错误，但也不会呈现任何内容。

Answer 1

问题是：

我需要数据：application/pdf;base64，在字符串前面
我的组件中没有组件。参见 https://github.com/wojtekmaj/react-pdf/issues/203

react-pdf 无法呈现 base64 PDF 数据，解释为十六进制字符串

react-pdf failing to render base64 PDF data, interpreting as hex string

pdf

reactjs

react-pdf