前端预览pdf文件流

ops/2024/11/24 3:45:54/

需求

后端接口返回pdf文件流,实现新窗口预览pdf。

解决方案

把后端返回的pdf文件流转为blob路径,利用浏览器直接预览。

具体实现步骤

1、引入axios

javascript">import axios from 'axios';

2、创建预览方法(具体使用时将axios的请求路径替换为你的后端下载地址)

javascript">export async function previewFile(data: IAttachment, callback?: () => void) {try {const response = await axios.get(config.VITE_APP_API_URL_PREPROD + '/file/downloadFile', {params: {filepath: data.filePath},responseType: 'blob'});let pdfUrl = window.URL.createObjectURL(new Blob([response.data], { type: "application/pdf" }));window.open(pdfUrl, "_blank");const newWindow = window.open(pdfUrl, '_blank');if (newWindow) {newWindow.onload = () => {newWindow.focus();};} else {// 如果新窗口被阻止,提示用户ElMessage.warning($t('请允许弹出窗口以预览文件'));}} catch (error) {console.error('Error preview file:', error);}
}

3、在你所需要的地方调用previewFile方法

javascript">import { previewFile } from "@/utils";
<el-button type="primary" @click="previewFile(file)">导出已选</el-button>

http://www.ppmy.cn/ops/136223.html

相关文章

利用c语言详细介绍下希尔排序

希尔排序是针对插入排序的优化算法。它是缩少增量的算法&#xff0c;一开始增量从元素个数len/2的增量开始&#xff0c;然后缩小增量gapgap/2&#xff0c;直到gap为1&#xff0c;最终完成序列排序。 一、图文介绍 我们还是使用数组【10&#xff0c;5&#xff0c;3&#xff0c;2…

迈向AI驱动的数据新时代:探索SQL Server 2025的全新向量数据库

随着科技的飞速发展&#xff0c;数据已成为推动各行各业进步的重要动力。而在这个数据爆炸的时代&#xff0c;如何高效地存储、检索和分析数据&#xff0c;成为了摆在我们面前的一大挑战。幸运的是&#xff0c;微软SQL Server 2025的推出&#xff0c;为我们带来了全新的向量数据…

【计算机网络】网段划分

一、为什么有网段划分 IP地址 网络号(目标网络) 主机号(目标主机) 网络号: 保证相互连接的两个网段具有不同的标识 主机号: 同一网段内&#xff0c;主机之间具有相同的网络号&#xff0c;但是必须有不同的主机号 互联网中的每一台主机&#xff0c;都要隶属于某一个子网 -&…

ubuntu dpkg 删除安装包

在Ubuntu中&#xff0c;可以使用dpkg命令来删除已安装的包。以下是删除安装包的基本命令&#xff1a; sudo dpkg -r package_name 这里package_name是你想要删除的包的名称。 如果你想要删除与该包相关的配置文件&#xff0c;可以使用以下命令&#xff1a; sudo dpkg -P pa…

基于Java Springboot医疗废弃物收运管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

如何在 Ubuntu 上安装 Mosquitto MQTT 代理

如何在 Ubuntu 上安装 Mosquitto MQTT 代理 Mosquitto 是一个开源的消息代理&#xff0c;实现了消息队列遥测传输 (MQTT) 协议。在 Ubuntu 22.04 上安装 MQTT 代理&#xff0c;您可以利用 MQTT 轻量级的 TCP/IP 消息平台&#xff0c;该平台专为资源有限的物联网 (IoT) 设备设计…

CSS3中的弹性布局之侧轴的对齐方式

1.对齐方式 &#xff08;1&#xff09;单行的情况&#xff1a; &#xff08;2&#xff09;多行的情况&#xff1a;

使用TensorFlow实现简化版 GoogLeNet 模型进行 MNIST 图像分类

在本文中&#xff0c;我们将使用 TensorFlow 和 Keras 实现一个简化版的 GoogLeNet 模型来进行 MNIST 数据集的手写数字分类任务。GoogLeNet 采用了 Inception 模块&#xff0c;这使得它在处理图像数据时能更高效地提取特征。本教程将详细介绍如何在 MNIST 数据集上训练和测试这…