pdf 预览 react

在React中进行PDF预览可以使用两种方式。一种是使用react-pdf插件，另一种是使用pdf.js库。

使用react-pdf插件，可以通过传入文件的base64编码来正常显示PDF。这个插件可以在GitHub上找到，并且可以使用npm进行安装。使用该插件需要将PDF文件放在静态文件夹下，并使用base64编码传入。

另一种方式是使用pdf.js库，这是一个原生JavaScript实现的插件，可以兼容大部分浏览器。在传统的web项目中，可以通过viewer.html?file="文件名称"的方式进行使用。但是在React项目中，需要将pdf.js的文件放在静态文件夹下，并使用适当的方法来传递文件的base64编码。具体代码如下：

stream.blob().then(blob => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = e => {
    const url = e.target.result;
    const myWindow = window.open('/preview', '_blank');
    myWindow.onload = () => myWindow.postMessage(url, window.origin);
  }
});

以上是使用两种方式在React中进行PDF预览的方法。如果您在使用react-pdf插件时遇到问题，可以参考其GitHub页面上的文档和示例代码来解决。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [react pdf预览](https://blog.csdn.net/zhongmei121/article/details/90066884)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]