react-pdf组件怎么把pdf文件直接展示demo

在React中，`react-pdf`是一个用于将PDF内容嵌入到Web应用程序中的库。要展示PDF文件，首先你需要安装必要的依赖并设置基本配置。以下是一个简单的步骤演示：

1. **安装**:
在项目目录下运行 `npm install react-pdf` 或者 `yarn add react-pdf` 来安装react-pdf。

2. **导入组件和样式**:
在你的React组件中引入`PDFViewer` 和其他必需的CSS样式，例如：

   import React from 'react';
   import { PDFViewer } from 'react-pdf/dist/entry.webpack';
   import 'react-pdf/dist/react-pdf.css'; // 引入全局样式

3. **加载PDF数据**:
你可以从本地、URL或浏览器支持的Blob来加载PDF。假设你有一个本地的PDF文件路径：

   const pdfData = require('./path/to/your/pdf.pdf'); // 替换为实际的PDF文件路径

4. **创建PDF Viewer组件**:
将PDF数据作为属性传递给PDFViewer，并提供一些可选参数如宽度和高度：

   function PdfDemo() {
     return (
       <div>
         <PDFViewer src={pdfData} width="100%" height="80vh" />
       </div>
     );
   }

5. **导出组件**:
最后，在你的App或其他适当的地方使用这个PdfDemo组件：

export default PdfDemo;

这是一个基础的示例，实际应用可能还需要处理错误处理、预览缩略图等更复杂的情况。如果你是从URL获取PDF，可以使用fetch或axios来动态请求数据。