vue实现pdf预览功能

背景:材料上传之后点击预览实现在浏览器上预览的效果
效果如下:
在这里插入图片描述
实现代码如下:
//预览和下载操作

<el-table-column fixed="right" label="操作" width="210"><template #default="scope"><span@click="handleRowClick(scope.row)"class="table-btn btn-handle"><i class="ri-eye-line"></i>预览</span><span@click="handleDownLoadClick(scope.row)"class="table-btn btn-handle"><i class="ri-download-2-line"></i>下载</span></template></el-table-column>
// 材料预览
export function materialPreview(data) {return Http.request({url: '/file/preview',method: 'get',responseType: 'blob',data: data});}//预览弹窗<el-dialogtitle="预览":visible.sync="PreviewDialogVisible"append-to-bodywidth="70%"center><div><iframe :src="pdfSrc" width="100%" height="800px"></iframe></div></el-dialog>//data中定义的变量data() {return {pdfSrc: "",downloadUrl: "http://10.110.96.76/",PreviewDialogVisible: false,}}//预览代码handleRowClick(row) {materialPreview({fileName:row.fileName,realFileName:row.fileName,}).then((res) => {console.log(res);const blob = new Blob([res.data], { type: "application/pdf" });this.pdfSrc = window.URL.createObjectURL(blob);this.$nextTick(() => {this.PreviewDialogVisible = true;});console.log(this.pdfSrc);//window.open(this.pdfSrc) //新窗口打开,借用浏览器去打印});}//下载代码handleDownLoadClick(data) {if (data.downloadUrl != null) {window.open(this.downloadUrl + data.downloadUrl);}},

后台返回的流文件格式
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hbase-热点问题(数据存储倾斜问题)

1. 危害 某一台regionserver消耗过多&#xff0c;承受过多的并发量&#xff0c;时间长机器性能下降&#xff0c;甚至宕机 2. 解决 可以通过设计rowkey预分区的方法解决 比如可以预分区120个&#xff0c;1月的数据存到1-10分区&#xff0c;每个月的数据存到10个分区&#xff…

初识React: 基础(概念 特点 高效原因 虚拟DOM JSX语法 组件)

1.什么是React? React是一个由Facebook开源的JavaScript库&#xff0c;它主要用于构建用户界面。React的特点是使用组件化的思想来构建界面&#xff0c;使得代码的可复用性和可维护性大大提高。React还引入了虚拟DOM的概念&#xff0c;减少了对真实DOM的直接操作&#xff0c;…

GaussDB数据库SQL系列-表连接(JOIN)

目录 一、前言 二、GaussDB JOIN 1、LEFT JOIN 2、LEFT JOIN EXCLUDING INNER JOIN 3、RIGHT JOIN 4、LEFT JOIN EXCLUDING INNER JOIN 5、INNER JOIN 6、FULL OUTER JOIN 7、FULL OUTER JOIN EXCLUDING INNER JOIN 三、GaussDB 实验示例 1、初始化实验表 2、LEFT …

无涯教程-Perl - getc函数

描述 此函数从FILEHANDLE中读取下一个字符(如果未指定,则从STDIN中读取),并返回值。 语法 以下是此函数的简单语法- getc FILEHANDLEgetc返回值 此函数返回错误或文件结尾的undef以及从FILEHANDLE读取的字符值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perl$k…

【git】Git 回退到指定版本:

文章目录 方法一: 使用 git reset 命令方法二&#xff1a;使用 git revert 命令方法三&#xff1a;使用 git checkout 命令常见的错误及其解决办法如下&#xff1a; 方法一: 使用 git reset 命令 命令可以将当前分支的 HEAD 指针指向指定的提交&#xff0c;从而回退代码到指定版…

PS透明屏,在科技展示中,有哪些优点展示?

PS透明屏是一种新型的显示技术&#xff0c;它将传统的显示屏幕与透明材料相结合&#xff0c;使得屏幕能够同时显示图像和透过屏幕看到背后的物体。 这种技术在商业展示、广告宣传、产品展示等领域有着广泛的应用前景。 PS透明屏的工作原理是利用透明材料的特性&#xff0c;通…

SDXL-Stable Diffusion改进版

文章目录 1. 摘要2. 算法&#xff1a;2.1 结构&#xff1a;2.2 微小的条件机制2.3 多宽高比训练2.4 改进自编码器2.5 所有组合放到一起2.6 主流方案比较 3. 未来工作4. 限制 论文&#xff1a; 《SDXL: Improving Latent Diffusion Models for High-Resolution Image Synthesis…

解决网关不定时出现Refresh routes error !!!

最近跟踪服务器日志,经常发现如下异常 ERROR o.s.c.g.r.CachingRouteLocator - [handleRefreshError,94] - Refresh routes error !!! org.springframework.expression.spel.SpelEvaluationException: EL1005E: Type cannot be found org.springframework.util.StreamUtils …

MATLAB详细安装教程(亲测有效!!)

1.复制以下链接&#xff0c;用百度网盘打开&#xff0c;下载 链接&#xff1a;https://pan.baidu.com/s/19AwQeCRYofGAV8sfDIm5PQ 提取码&#xff1a;mads 我是下载到D盘自己创建的文件中 2.下载完毕后打开此文件夹&#xff0c;点击最后一项 3.点击右上角高级选项&#xff0…

数据可视化(八)堆叠图,双y轴,热力图

1.双y轴绘制 #双Y轴可视化数据分析图表 #add_subplot() dfpd.read_excel(mrbook.xlsx) x[i for i in range(1,7)] y1df[销量] y2df[rate] #用来正常显示负号 plt.rcParams[axes.unicode_minus]False figplt.figure() ax1fig.add_subplot(1,1,1)#一行一列&#xff0c;第一个区域…

matlab智能算法程序包89套最新高清录制!matlab专题系列!

关于我为什么要做代码分享这件事&#xff1f; 助力科研旅程&#xff01; 面对茫茫多的文献&#xff0c;想复现却不知从何做起&#xff0c;我们通过打包成品代码&#xff0c;将过程完善&#xff0c;让您可以拿到一手的复现过程以及资料&#xff0c;从而在此基础上&#xff0c;照…

Eclipse如何自动添加作者、日期等注释

一、创建类时自动添加注释 1、Window->Preferences 2、Java->Code Syle->Code Templates->Code->New Java files->Edit->要添加的注释->Apply 二、选中要添加的类或者方法通过AltShiftJ快捷键添加 1、Window->Preferences 2、Java->Code Syle…

04 统计语言模型(n元语言模型)

博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https://github.com/nickchen121/Pre-training-language-model 配套博客链接:https://www.cnblogs.com/nickchen121/p/15105048.html 预训练 预先训练 我们…

java+springboot+mysql校园通讯录管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的校园通讯录管理系统&#xff0c;系统包含超级管理员、管理员、用户角色&#xff0c;功能如下&#xff1a; 超级管理员&#xff1a;管理员管理&#xff1b;部门管理&#xff1b;用户管理&#xff1b;留言管理&#xff1b;公…

sqlserver 数据库显示 正在还原

问题描述之前不太会搞差异备份的恢复&#xff0c;然后恢复发生了失败之后这个数据库一直处于(正在还原……状态 并且出现数据库无法访问的情况 尝试解决1执行查询Restore Database 数据库名称 with Recovery然后不太能行 2执行查询Restore Database 数据库名称 with NoRecovery…

springboot+jpa+mysql电子数码商城含后台管理源码

#开发技术 #前端 bootstarp框架 html页面 #后端技术 SpringBoot SpringMvc jpa #开发工具 eclipse或者idea jdk1.8 mysql5点几版本 maven环境 maven3.5 前端地址&#xff1a;&#xff1a;http://localhost:8080/mall 后台地址&#x…

Lombok 中 @EqualsAndHashCode注解的使用

Lombok 中 EqualsAndHashCode注解的使用 EqualsAndHashCode注解的作用 EqualsAndHashCode注解的作用就是自动实现model类的equals方法和hashcode方法。我们在实际工作中经常会使用lombok来简化我们的开发&#xff0c;例如我们可以在定义的model类上添加Data注解&#xff0c;从…

Flowable-结束事件-取消结束事件

目录 定义图形标记XML内容使用示例视频教程 定义 取消结束事件只能与 BPMN 事务子流程结合使用&#xff0c;它可以取消一个事务子流程的执行&#xff0c;同时 也只能在子流程中执行。实际应用中&#xff0c;会把取消事件&#xff0c;事务子流程&#xff0c;补偿事件一起用。当…

powershell几句话设置环境变量

设置环境变量比较繁琐&#xff0c;现在用这段话&#xff0c;在powershell中就可以轻松完成。 $existingPath [Environment]::GetEnvironmentVariable("Path", "Machine") $newPath "C:\Your\Path\Here"if ($existingPath -split ";"…

Detecting Everything in the Open World: Towards Universal Object Detection

1. 论文简介 论文题目《Detecting Everything in the Open World: Towards Universal Object Detection》发表情况&#xff0c;CVPR2023[论文地址][https://arxiv.org/pdf/2303.11749.pdf][代码地址][https://github.com/zhenyuw16/UniDetector] 2.背景与摘要 本文旨在解决通…