React-pdf 无法渲染 Base64 PDF 数据，解释为十六进制字符串

Question

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

\n\n

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

\n\n

但是，如果我将数据插入到react-pdf文档中，我会收到错误：

\n\n

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

\n\n

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

\n\n

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

\n\n

\n\n

文档明确指出 file prop 可以是 B64 编码的内容。知道问题出在哪里吗？如果需要的话，这是 B64 数据：

\n\n

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

\n\n

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

\n

Answer 1

问题是：

1. 我需要 data:application/pdf;base64，在字符串前面
2. 我的组件内部没有组件。请参阅https://github.com/wojtekmaj/react-pdf/issues/203