React 实现PDF预览(数据源使用文件流而不是url)

本文主要是介绍React 实现PDF预览(数据源使用文件流而不是url),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一 前提

        应公司要求,需要进行上传文件(pdf)的预览功能,网上大部分都是使用url作为预览数据源,但是现在后端那边只返回了pdf文件流,所以本文主要是用文件流来预览pdf。

二  首先需要获取pdf文件流,并转化为base64格式的数据。

1. 封装axios方法,用于获取pdf文件流

const apiClient = axios.create({baseURL: '/', // 1.测试环境 /aidss-apiheaders: {'Content-Type': 'application/json;charset=UTF-8'}
});// 封装的axiosget方法,获取pdf文件流 
const axiosGetFileBlob = async (url: string) => {try {const configs: any = {method: 'get',url: `${url}`,responseType: 'blob'};const res = await apiClient.get(url, configs);return res.data;} catch (error) {// 抛出异常信息}return null as any;
};

2.调用封装的方法,获取文件流并转为base64格式的数据。

 // 将文件流转为base64格式
const getBase64 = (file: any) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});
};  const getData = async () => {const res = await axiosGetFileBlob("这里是获取pdf的url");if (res) {// 这里获取到了文件流,首先需要转化为base64格式的数据const baseData = await getBase64(res);// 转化为base64的数据有一个文件类型的前缀,需要去掉。const resourceData = baseData.split(',')[1];// 这里需要拼接一个前缀,表示这个是一个pdf文件const finalData= "data:application/pdf;base64," + resourceData ;consloe.log("finalData就是获取到的pdf文件流");}}

 三 进行pdf预览功能

        根据第二步,可以拿到后端获取后并转化为base64格式的文件流数据。

        pdf预览有下列几种方式,主要分为系统自带预览(iframe,object,embed)以及插件预览(react-pdf-js)。大家可以自行选用合适。

1. 使用系统自带的方式预览(iframe,object,embed)。

        使用方式很简单,直接将第二步的finalData放到各自的数据源属性下。代码如下:

// 使用iframe
<iframe src={finalData+ "#toolbar=0"} height={800}>您的电脑不支持iframe</iframe>// 使用embed
<embed src={finalData+ "#toolbar=0"} height={800}/>// 使用 object
<object data={finalData+ "#toolbar=0"} height={800}></object>

效果如下:

 备注:

        预览的pdf大小自由设置标签的属性即可。

        #toolbar=0  代码的意思是隐藏顶部工具栏(下载、打印等),如果不加,则效果如下:

2.使用插件的方式预览(react-pdf-js)。

(1) 首先需要安装:

   yarn add @mikecousins/react-pdf  或者  npm install @mikecousins/react-pdf

(2)实现代码如下:

import React, {useEffect, useState} from "react";
import PDF from 'react-pdf-js';
// getFileBlob 就是上面提到过的:从后端拿取数据流
import {getFileBlob} from "@/services/common";
// getBase64 就是将数据转为base64格式
import {getBase64} from "@/utils/common";export default () => {const [totalPage, setTotalPages] = useState(1);const [currentPage, setCurrentPage] = useState(1);// 保存后端获取到后并转化为base64的数据流const [pdfBlob, setPdfBlob] = useState<any>(null);const getData = async () => {const res = await getFileBlob("20240902095451482799");debuggerif (res) {const baseData = await getBase64(res);const resourceData = baseData.split(',')[1];if (resourceData) {// 有数据再进行拼接,否则无效const finalData = "data:application/pdf;base64," + resourceData;setPdfBlob(finalData);}}}useEffect(() => {getData();});const onDocumentLoadSuccess = (totalPage: any) => {setTotalPages(totalPage);setCurrentPage(1);}// 一次展示所有界面const showAllPages = () => {const page = [];for (let i = 2; i <= totalPage; i++)page.push(<PDF page={i} key={`page-${i}`} file={finalPdfBlob} scale={1.5}/>);return page;}return (<div>{/* 一定要注意(必须要先进行pdfBlob的判定,pdfBlob 为空的话,不能继续下去。否则系统会报错。)*/}{pdfBlob && <div><PDFscale={1.5}file={pdfBlob}onDocumentComplete={onDocumentLoadSuccess}page={currentPage}/>{/* 一次性展示全部页面:代码如下 */}{totalPage > 1 && showAllPages()}{/*  这里也可以添加分页组件 ,进行分页展示,调用 setCurrentPage 即可。 */}</div>}</div>);
}

四 应用(在浏览器新打开的窗口中预览)

        我这里的预览使用的是iframe。将上面拿到的base64串,放到iframe中作为数据源。再结合window方法即可。代码如下:

<Button onClick={()=>getPdfContent("123456")}>预览<Button>  // 点击方法
const getPdfContent = async (id: string) => {try {// 从后端获取pdf数据流const pdfBlob = await getFileBlob(id);if (pdfBlob) {// 将pdf数据流转为base64字符串const pdfBase64 = await getBase64(pdfBlob);if (pdfBase64) {//获取的数据有前缀,不满足下载的pdf格式。需要去掉后,单独拼接pdf的格式const pdfData = pdfBase64.toString().split(',')[1]; const iframeSrc = `data:application/pdf;base64,${pdfData}`;// -----------------关键位置------------// 创建window.open方法,并将iframe结合数据源写入。const pdfWindow = window.open("", id);pdfWindow?.document.write(`<iframe width='100%' height='100%' src=${iframeSrc}></iframe>`);pdfWindow?.document.close();}}} catch (e) {console.log("系统错误!");}};

        

        

这篇关于React 实现PDF预览(数据源使用文件流而不是url)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1131020

相关文章

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

C# Where 泛型约束的实现

《C#Where泛型约束的实现》本文主要介绍了C#Where泛型约束的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用的对象约束分类where T : structwhere T : classwhere T : ne

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr