pdf 预览 react
时间: 2023-09-13 21:10:38 浏览: 180
在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编码。具体代码如下:
```javascript
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 ]
阅读全文
相关推荐

















