React-pdf-js插件使用与base64显示图片与文件

由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的react,后端 是接口的方式,只能选择base64这种方式,而且也方便可以存各种格式。

1.React下react-pdf-js安装
官网

大家可以点进去,然后里面有介绍安装方法如何使用。

2.然后页面显示如下:

引入
import PDF from 'react-pdf-js';
export default class Document extends Component{
    construtor(){
        super();
        this.state = {}
    }
     onDocumentComplete = (pages) => {
        console.log(pages); //总页
        this.setState({ page: 1, pages });
    }
    handlePrevious = () => {
        this.setState({ page: this.state.page - 1 });
    }

    handleNext = () => {
        this.setState({ page: this.state.page + 1 });
    }
    
    render(){
        //翻页
        const pagination = (previous,next) =>{
            let previousButton = <Button onClick={this.handlePrevious}>上一页</Button>;
            if(previous === 1){
                previousButton = <Button>首页</Button>;
            }
            let nextButton = <Button onClick={this.handleNext}>下一页</Button>;
            if(previous === next){
                nextButton = <Button>最后一页</Button>;
            }

            return <span>{previousButton}{nextButton}  第{previous}页 共{next}页</span>;
        }
                
        return(
            <PDF
            file={apiManager.pdf + this.state.id}
            onDocumentComplete={this.onDocumentComplete}
            page={this.state.page}
            width={this.state.width}
            />        
        )
    }
}

然后分页有部分我没有按他官网的来我是自己写的,因为我觉得官网的写得太多了,大家可以参考一下

3.React 采用base64显示图片
由于我是做PHP的,后台接口与前端都是自己写的,这里只介绍php的方法。我也看过网上的一些方法,我不知道为什么那些人会写得那么麻烦,一条语句的问题,写了一大片,而且还有问题。代码如下:
后台代码:

        $fileHandle = fopen($thumbImageFile,"r"); //打开文件
        $file_datas = fread($fileHandle, filesize($thumbImageFile));//读取文件
        $thumbnail = chunk_split(base64_encode($file_datas));转会为base64将图片

直接使用chunk_split(base64_encode(读取的图片));直接就可以化为base64然后存到数据库,即可

React显示:

//imageSrc 是从数据库中取出来的图片字段取到的数据
<img src={'data:image/jpg/png/gif;base64,'+imageSrc} alt="pic" />

如果要显示pdf直接application/pdf;basa64,...
不过个人不建议pdf使用这种方式,因为pdf转成这种格式后,会比你上传的文件大8倍。也就是你传1M,数据库存的是8M,你要是上传100M,200M这样子的就有点儿恐怖了,对性能方面不利,图片的话大小没有改变.对于PDF可以使用其它方式,可以单独写一个接口什么的直接输出也很简单,方法如下:

header("Content-type: " . $type . ";charset=utf-8");
header('Access-Control-Allow-Headers:Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma,Last-Modified, Cache-Control,Expires,Content-Type,X-E4M-With,Authorization');
header('Access-Control-Allow-Origin:*');

echo $data;
unset($rs);

传入ID查询出来数据,然后以上面的方式显示即可,$type是类型如application/pdf,$data是数据,其它的是加的跨域的。
然后直接把这个链接直接放到pdf file后面即可,也很方便。

<think>我们正在寻找一个React插件,用于通过base64数据预览PDF文件。根据之前的讨论,我们知道微信小程序中预览Base64PDF的几种方案,但现在我们是在React(可能是Web环境)中实现类似功能。在React生态中,我们可以使用现有的PDF查看器库,这些库通常支持从base64数据源加载PDF。常见的库有:1.**react-pdf**(基于pdf.js):这是一个流行的ReactPDF查看器组件,支持多种数据源,包括base64。2.**@react-pdf-viewer**:一个功能更丰富的PDF查看器,同样支持base64。下面分别介绍这两个库的使用方法:###方案1:使用`react-pdf`(简单轻量)`react-pdf`提供了`Document`和`Page`组件来显示PDF。它支持base64数据源。**安装**:```bashnpminstallreact-pdf```**使用示例**:```jsximport{Document,Page}from'react-pdf';import'react-pdf/dist/esm/Page/AnnotationLayer.css';import'react-pdf/dist/esm/Page/TextLayer.css';functionPDFViewer({base64String}){//将base64字符串转换为DataURLconstdataUrl=`data:application/pdf;base64,${base64String}`;return(<Documentfile={dataUrl}><PagepageNumber={1}/></Document>);}```**注意**:-需要引入CSS文件以支持文本层和注释层(可选,如果需要文本选择则必须)。-支持多页,可以通过状态管理当前页码。###方案2:使用`@react-pdf-viewer`(功能丰富)`@react-pdf-viewer`是一个更强大的PDF查看器,提供工具栏、缩略图等。**安装**:```bashnpminstall@react-pdf-viewer/core@react-pdf-viewer/default-layout```**使用示例**:```jsximport{Viewer}from'@react-pdf-viewer/core';import{defaultLayoutPlugin}from'@react-pdf-viewer/default-layout';import'@react-pdf-viewer/core/lib/styles/index.css';import'@react-pdf-viewer/default-layout/lib/styles/index.css';functionPDFViewer({base64String}){constdefaultLayoutPluginInstance=defaultLayoutPlugin();constdataUrl=`data:application/pdf;base64,${base64String}`;return(<ViewerfileUrl={dataUrl}plugins={[defaultLayoutPluginInstance]}/>);}```**注意**:-这个库提供了更多的功能,但体积也更大。-需要引入样式文件。###注意事项1.**base64字符串格式**:确保base64字符串是纯数据(不含前缀`data:application/pdf;base64,`),然后在代码中拼接成DataURL。2.**性能**:大型PDF文件可能会导致渲染缓慢,考虑使用分页加载或仅加载当前页。3.**样式**:记得导入必要的CSS文件,否则可能无法正常显示。###相关问题1.如何在React中实现PDF文件的下载功能(通过base64)?2.如何优化大型PDF文件React应用中的渲染性能?3.React中还有哪些其他支持PDF预览的库?以上方案在Web环境中均可使用,根据需求选择轻量级或功能丰富的解决方案。</think>### React中预览Base64格式PDF的解决方案 在React应用中预览Base64格式的PDF文件,推荐使用以下两种主流方案: #### 方案1:使用`react-pdf`库(轻量级方案) 这是基于PDF.js的轻量级React组件库,直接支持base64数据源。 **安装依赖**: ```bash npm install react-pdf ``` **实现代码**: ```jsx import { Document, Page } from 'react-pdf'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; function PDFViewer({ base64Data }) { // 转换为Data URL格式 const pdfUrl = `data:application/pdf;base64,${base64Data}`; return ( <Document file={pdfUrl}> <Page pageNumber={1} /> </Document> ); } // 使用示例 <PDFViewer base64Data="JVBERi0xLjcK..." /> ``` **特点**: - 支持文本选择和注释层(需导入CSS)[^3] - 内置分页导航功能 - 体积小巧(gzip后约30KB) #### 方案2:使用`@react-pdf-viewer`(功能丰富方案) 提供完整的PDF查看器体验,包含工具栏、缩略图等高级功能。 **安装依赖**: ```bash npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout ``` **实现代码**: ```jsx import { Viewer } from '@react-pdf-viewer/core'; import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; function PDFViewer({ base64Data }) { const defaultLayout = defaultLayoutPlugin(); const pdfUrl = `data:application/pdf;base64,${base64Data}`; return ( <Viewer fileUrl={pdfUrl} plugins={[defaultLayout]} /> ); } ``` ### 关键注意事项 1. **base64处理**: - 确保传入纯base64字符串(移除`data:application/pdf;base64,`前缀) -文件建议分块加载(>10MB时) 2. **Vite配置**: 在`vite.config.js`中添加base路径配置,避免白屏问题: ```js export default defineConfig({ plugins: [react()], base: './' // 关键配置[^1] }) ``` 3. **兼容性处理**: - 对于CommonJS模块,添加`vite-plugin-commonjs`: ```js plugins: [commonjs(), react()] // commonjs必须在react前[^4] ``` 4. **性能优化**: ```jsx // 使用React.memo避免重复渲染 export default React.memo(PDFViewer); ``` ### 备选方案 1. **原生PDF.js集成**: 直接使用PDF.js库,最大程度自定义: ```js import * as pdfjsLib from 'pdfjs-dist/build/pdf'; pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js'; const loadingTask = pdfjsLib.getDocument({ data: atob(base64Data) }); ``` 2. **iFrame嵌入**: 适用于简单场景: ```jsx <iframe src={`data:application/pdf;base64,${base64Data}`} width="100%" height="500px" /> ``` ### 相关问题 1. 如何在React中实现PDF文件的下载功能(通过base64)? 2. 如何优化大型PDF文件(50MB+)在React应用中的渲染性能? 3. React中如何为PDF预览器添加自定义水印? 4. Vite构建React应用时如何处理PDF.js的worker加载问题? 5. 在Next.js中预览base64 PDF有哪些特殊注意事项? > 提示:对于微信小程序环境,请参考之前讨论的`wx.openDocument`方案[^2],React方案主要适用于Web应用场景。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值