(vue)前后端配合实现文件预览功能

(vue)前后端配合实现文件预览功能


1.页面:

在这里插入图片描述
2.后台返回数据:

在这里插入图片描述

3.预览效果:

在这里插入图片描述


4.代码:


<el-descriptions-item>
  <template slot="label">文件名称</template>
  <el-button type="text" @click="fileView" >{{ file.name }}</el-button>
</el-descriptions-item>

data(){
	return {
		file:{
			name:"",
			id:"",
		}
	}
}

// 文件预览
fileView() {
  const data = {
    id: this.file.id
  }
  preview_direct(data).then((res) => { //preview_direct是后端接口名称
    const data = res
    const url = window.URL.createObjectURL(
      new Blob([data], {
        type: 'application/pdf'
      })
    )
    const link = document.createElement('a')
    link.style.display = 'none'
    window.open(url)
  })
},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数字逻辑电路基础-时序逻辑电路之触发器

文章目录 一、D触发器二、verilog源码三、综合及仿真结果一、D触发器 本文介绍数字逻辑电路中常用的基础时序逻辑电路触发器。它有记忆和存储信息功能,触发器是边沿触发电路。 下图是触发器常用表示方式(时钟上升沿有效): 触发器由两个锁存器组成,前级是主锁存器,后级…

Python接口自动化测试 —— Selenium+pytest+数据驱动

主流自动化框架 selenium &#xff1a;web端自动化框架 &#xff0c;&#xff08;行业里面最核心的框架&#xff09; appium &#xff1a;手机app端框架 requests &#xff1a;接口测试 selenium 工具类封装 selenium提供了很多方法供我们去完成网页元素的操作&#xff0c; 在…

世微 多功能 LED降压型恒流芯片内置2.2A LED摩托车灯 全亮 半亮 爆闪 AP2403

产品描述 AP2403 是一款 PWM 工作模式,内置功率管&#xff0c;适用于 5-100V 输入的高精度降压 LED 恒流驱动芯片。输出功率可达 22W&#xff0c;电流 2.2A。AP2403 可实现三段功能切换&#xff0c;通过 MODE1/2/3 切换三种功能模式&#xff1a;全亮&#xff0c;半亮&#xff0…

ElementPlusError: [ElOnlyChild] no valid child node found

突然发现页面报了一堆黄色的错误提示 查了下原来是这里导致的&#xff0c;只需要把v-if 挪到popover那层即可 解决

sql调优

慢查询 SQL 治理方案 一、SQL 性能下降的原因 在对 SQL 进行分析之前&#xff0c;需要明确可能导致 SQL 执行性能下降的原因进行分析&#xff0c;执行性能下降可以体现在很多方面&#xff1a; 查询语句写的烂索引没加好表数据过大数据库连接数不够查询的数据量过大被其他慢s…

TikTok美区本土店铺如何做好IP隔离?

为什么要进行IP隔离呢&#xff1f;因为我们无法在国内直接运营Shopee、TikTok、Lazada等平台的本土店&#xff0c;平台识别出店铺登录IP非本土IP&#xff0c;则容易导致店铺风控、被标记为伪本土店&#xff0c;影响店铺经营。 TikTok美区店铺的IP隔离方法和Shopee本土店一致&a…

羊大师详解羊奶如何帮助控制血压

羊大师详解羊奶如何帮助控制血压 羊奶是一种珍贵的天然饮品&#xff0c;不仅具有丰富的营养成分&#xff0c;还被证实对血压具有调控作用。很多人在了解到羊奶的功效后&#xff0c;都对其与血压之间的关系产生了浓厚的兴趣。接下来&#xff0c;小编羊大师将为大家详细介绍羊奶…

UEC++ day8

伤害系统 给敌人创建血条 首先添加一个UI界面用来显示敌人血条设置背景图像为黑色半透明 填充颜色 给敌人类添加两种状态表示血量与最大血量&#xff0c;添加一个UWidegtComponet组件与UProgressBar组件 UPROPERTY(EditAnywhere, BlueprintReadWrite, Category "Enemy …

短视频变表情包gif怎么做?这一招最好用

Gif动态表情包是一种有效的表达感情的方式。可以通过添加图像、文字等更加直观的传递情感和信息。在各种聊天软件中gif动态表情包也是非常收欢迎的。当我们看到一段视频想要将其制作成gif动态表情包的时候要怎么操作呢&#xff1f;教大家使用在线制作gif&#xff08;https://ww…

低代码开发:云表颠覆传统,轻松破解应用开发周期长之困局

在传统的应用开发模式下&#xff0c;应用开发周期长一直是IT部门和业务部门头疼的问题。面对业务部门提出的一个又一个新的应用需求&#xff0c;IT部门往往应接不暇&#xff0c;难以一一满足。这种困境不仅使IT部门负担沉重&#xff0c;更导致业务部门因长时间的等待而心生不满…

SVD 最小二乘法解 亲测ok!

线性最小二乘问题 m个方程求解n个未知数&#xff0c;有三种情况&#xff1a; mn且A为非奇异&#xff0c;则有唯一解&#xff0c;xA.inverse()*bm>n&#xff0c;约束的个数大于未知数的个数&#xff0c;称为超定问题&#xff08;overdetermined&#xff09;m<n&#xff0…

多个视频怎么生成一个二维码?二维码看视频的制作方法

二维码能放入多个视频吗&#xff1f;现在用二维码看视频是很流行的一种方式&#xff0c;不仅符合现在人的行为习惯&#xff0c;而且还不需要占用自身的容量空间&#xff0c;能够即时的获取视频内容。那么当有多个视频需要展示&#xff0c;但是想要放到一个二维码中&#xff0c;…

推荐一款png图片打包plist工具pngPackerGUI_V2.0

png图片打包plist工具&#xff0c;手把手教你使用pngPackerGUI_V2.0 此软件是在pngpacker_V1.1软件基础之后&#xff0c;开发的界面化操作软件&#xff0c;方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件&#xff0c;得到如下目录&#xff0c;双击打开 pngPackerGUI.…

Claude 发布2.1 版本,重大升级更新来看看有什么新功能?

11 月 23 日消息&#xff0c;OpenAI 竞争对手 Anthropic 日前推出了 Claude 2.1 聊天机器人及对应同名 AI 模型Claude 2.1&#xff0c;本文将总结Claude 2.1的主要功能。 增强的处理能力 上下文处理量大幅提升&#xff1a;Claude 2.1 现在能处理高达 200K上下文标记&#xff…

完美解决AttributeError: module ‘numpy‘ has no attribute ‘typeDict‘

文章目录 前言一、完美解决办法安装低版本1.21或者1.19.3都可以总结 前言 这个问题从表面看就是和numpy库相关&#xff0c;所以是小问题&#xff0c;经过来回调试安装numpy&#xff0c;发现是因为目前的版本太高&#xff0c;因此我们直接安装低版本numpy。也不用专门卸载目前的…

【Java从入门到大牛】网络编程

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Java从入门到大牛 &#x1f320; 首发时间&#xff1a;2023年11月23日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f4…

Mybatis plus 简介

简介 MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 官网:https://baomidou.com/pages/24112f/ 特性 无侵入&…

Mybatis一级缓存和二级缓存原理剖析与源码详解

Mybatis一级缓存和二级缓存原理剖析与源码详解 在本篇文章中&#xff0c;将结合示例与源码&#xff0c;对MyBatis中的一级缓存和二级缓存进行说明。 MyBatis版本&#xff1a;3.5.2 文章目录 Mybatis一级缓存和二级缓存原理剖析与源码详解⼀级缓存场景一场景二⼀级缓存原理探究…

安卓手机好用的清单软件有哪些?

生活中每个人都有丢三落四的习惯&#xff0c;伴随着生活节奏的加快&#xff0c;人们常忘事的情况会更加频繁的出现&#xff0c;这时候很多人就开始选择手机上记录清单类的软件&#xff0c;安卓手机在手机市场中占有很大的分量&#xff0c;在安卓手机上好用的记录清单的软件有哪…