前端预览pdf文件流

server/2024/11/27 4:59:15/

需求

后端接口返回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/server/145246.html

相关文章

【MySQL】MySQL从入门到放弃

文章目录 声明MYSQL一,架构1.1.网络连接层数据库连接池 1.2.系统服务层1.2.1.SQL接口1.2.2.存储过程1.2.3.触发器1.2.4.解析器1.2.5.优化器1.2.6.缓存,缓冲 1.3.存储引擎层1.4.文件系统层1.4.1.日志模块1.4.2.数据模块 二,SQL 执行2.1.执行流程2.2.刷盘2.3.返回 三.库表设计3.1…

基于FPGA的2FSK调制-串口收发-带tb仿真文件-实际上板验证成功

基于FPGA的2FSK调制 前言一、2FSK储备知识二、代码分析1.模块分析2.波形分析 总结 前言 设计实现连续相位 2FSK 调制器&#xff0c;2FSK 的两个频率为:fI15KHz&#xff0c;f23KHz&#xff0c;波特率为 1500 bps,比特0映射为f 载波&#xff0c;比特1映射为 载波。 1&#xff09…

开源Tacchi 视触觉传感器仿真器,为机器人与物体接触仿真提供高质量的Sim2Real性能!

Tacchi是一个基于Taichi编程语言开发的低计算成本弹性体形变仿真器&#xff0c;由方斌教授团队开发并已开源&#xff0c;为机器人与物体接触仿真提供高质量的Sim2Real性能&#xff01;该仿真器以较低的计算资源消耗来模拟弹性体的物理形变&#xff0c;并生成与真实触觉图像相似…

国科大数据挖掘24秋期末考试试题回顾

1. 数据仓库 OLAP操作 2.bin 平滑 归一化计算 3.决策树&#xff08;Information Gain&#xff09;/ 朴素贝叶斯算法 4.FPgrowth 5. single Link 6. recommend rating 和这个题差不多 7.忘了 大部分题目可以看往年题目&#xff0c;作业题。

第9章 异常处理器

第九章 异常处理器 9.1 什么是异常处理器 Spring MVC在处理器方法执行过程中出现了异常&#xff0c;可以采用异常处理器进行应对。 一句话概括异常处理器作用&#xff1a;处理器方法执行过程中出现了异常&#xff0c;跳转到对应的视图&#xff0c;在视图上展示友好信息。 S…

Python 网络爬虫操作指南

网络爬虫是自动化获取互联网上信息的一种工具。它广泛应用于数据采集、分析以及实现信息聚合等众多领域。本文将为你提供一个完整的Python网络爬虫操作指南&#xff0c;帮助你从零开始学习并实现简单的网络爬虫。我们将涵盖基本的爬虫概念、Python环境配置、常用库介绍。 上传…

HAProxy面试题及参考答案(精选80道面试题)

目录 什么是 HAProxy? HAProxy 主要有哪些功能? HAProxy 的关键特性有哪些? HAProxy 的主要功能是什么? HAProxy 的作用是什么? 解释 HAProxy 在网络架构中的作用。 HAProxy 与负载均衡器之间的关系是什么? HAProxy 是如何实现负载均衡的? 阐述 HAProxy 的四层…

《硬件架构的艺术》笔记(七):处理字节顺序

介绍 本章主要介绍字节顺序的的基本规则。&#xff08;感觉偏软件了&#xff0c;不知道为啥那么会放进《硬件架构的艺术》这本书&#xff09;。 定义 字节顺序定义数据在计算机系统中的存储格式&#xff0c;描述存储器中的MSB和LSB的位置。对于数据始终以32位形式保存在存储器…