【vue下载】vue 点击下载图片直接打开问题解决

问题：
点击下载按钮，用a标签的download属性，会在当前页直接打开图片

使用base64转换也还是如此

最后用了blob转换，问题解决

  <el-button type="text" size="small"v-if="scope.row[fileDataName[0]]"@click="onUpLoad(scope.row.fileUrl, scope.row)">下载</el-button>

 /** 下载文件 */async onUpLoad(callback, file) {let url = file.fileUrllet data = await fetch(url).then(response => response.blob()).then(res => {console.log(res, '==============')let blod = new Blob([res])let name = file.realNamethis.downloadBlob(blod, name)})return data},

 downloadBlob(blob, fileName) {try {const href = window.URL.createObjectURL(blob) //创建下载的链接if (window.navigator.msSaveBlob) {window.navigator.msSaveBlob(blob, fileName)} else {       const downloadElement = document.createElement('a')downloadElement.href = hrefdownloadElement.target = '_blank'downloadElement.download = fileNamedocument.body.appendChild(downloadElement)downloadElement.click() // 点击下载document.body.removeChild(downloadElement) // 下载完成移除元素window.URL.revokeObjectURL(href) // 释放掉blob对象}} catch (e) {console.log('下载失败')}},

【vue下载】vue 点击下载图片直接打开问题解决相关推荐

vue a链接点击下载文件
vue前端点击某个a便签需要下载对应文件代码,href为下载路径,download为下载文件名 <a href="./static/file/上传文件字段要求.docx" d ...
SpringBoot+Vue 实现大文件断点下载
目录效果代码 SpringBoot Vue 效果步骤点击下载在输入框输入下载的文件名称点击暂停再次点击开始下载完成代码 SpringBoot pom <!-- 做断点下载使用- ...
分辨mqtt在线与离线_最全视频下载方案，100%下载所有在线视频！
前言之前跟大家分享过一款视频下载王软件,得到了不少朋友的好评. MeetUp:这款小巧且万能的视频下载.录频.格式转换工具,用了都觉得香!zhuanlan.zhihu.com 但是也有些朋友反馈有 ...
度盘满速直接下载无需登录直接下载。
话不多说直接上教程.不叨叨直接来加速幸福生活. 目录 1.网页在线版 2.选择文件 3.获取直接连接 4.重点之重下载DM. 5.重点之重配置IDM 6.复制直连点击下载 7.下载 1.网页在线版 ...
【jQuery】jQuery与vue实现点击下载图片以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...
vue实现点击下载exe，运行报错shellexecuteex失败代码2
页面效果 exe插件放在vue项目的public文件夹里,然后用a标签实现点击下载 <a href="/VideoWebPlugin.exe">下载插件</a&g ...
前端实现点击下载图片
方法一:使用a标签的download属性. <a href="1.jpg" download="1.jpg">下载图片</a> 注意: ...
Vue调试神器vue-devtools - 插件下载安装
文章目录 Google如何安装调试Vue的神器`vue-devtools` ? 安装介绍: demo实例 - 演示代码: 相关文章链接: 1. https://github.com/vuejs/vue ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...

【vue下载】vue 点击下载图片直接打开问题解决

【vue下载】vue 点击下载图片直接打开问题解决相关推荐

最新文章

热门文章