Blob 链接 下载
起因是使用element plus时上传图片的自定义缩略图中有个下载按钮，于是便捣鼓了一下
element plus是将图片转换成 blob:http 在网页上显示的。但是我们要想下载便只能自己想办法了
<el-uploadv-model="form.url"action="#":file-list="fileList"list-type="picture-card":auto-upload="false":on-change="handleChange":before-upload="beforeAvatarUpload"><el-icon><i-ep-plus /></el-icon><template #file="{ file }"><div><img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><el-icon><i-ep-zoom-in /></el-icon></span><spanv-if="!disabled"class="el-upload-list__item-delete"@click="handleDownload(file)"><el-icon><i-ep-download /></el-icon></span><spanv-if="!disabled"@click="handleRemove(file)"class="el-upload-list__item-delete"><el-icon><i-ep-delete /></el-icon></span></span></div></template></el-upload>
const handleDownload = (file: UploadFile) => {let blob = new Blob([<string>file.url], {//这个里面的data 的二进制文件 创建一个文件对象type: 'text/plain;charset=utf-8'})const a = document.createElement('a')a.href = URL.createObjectURL(blob)a.download = file.namea.click()URL.revokeObjectURL(a.href)a.remove()
}
- 上面页可以封装一下
function downloadExportFile (res,fileName，type, suffix) {const blob = new Blob([res],{type:`application/${type}`});const a = document.createElement('a');a.href = URL.createObjectURL(blob);a.download = fileName + suffix;a.click();URL.revokeObjectURL(a.href);a.remove();
}
完结散花
Blob 链接 下载相关推荐
- HTML a链接下载文件之图片，文件，乱码等问题
我们在做需求的时候,经常会遇到下载文件 前端下载文件一般分为两种方式: 使用 a 链接进行下载: <a herf="url" >下载</a> 向后端发送请求 ...
- a链接下载文件或者点击按钮自动下载
文件下载方法 downloadFile(fileName:string,filePath:string){this.service.downloadFile(filePath).subscribe(f ...
- IE中点击链接下载EXCEL文件直接以乱码方式打开解决
我需要在页面上通过javascript控制,点击一个链接下载excel文件模板,总觉得方法都写对了,可每次点击都是新开一个窗口,显示的全是乱码.几日以来一直被这个问题困扰,今天无意中得知这个方法,试了 ...
- ＜a＞链接下载视频 而不是打开新页面播放
开发中我们常用<a标签>链接下载数据, 非常好用.但是在下载视频的时候 会遇到无法下载 转而打开新页面播放的bug 其实, 查看该响应的headers你就会发现, 它的 Response ...
- java访问https链接下载图片
java访问https链接下载图片 一.通过maven引入https工具包 <dependency><groupId>org.apache.httpcomponents< ...
- 链接下载(在线链接下载)
链接下载java代码,Java打印输出数据println和print打印输出数据,System.out.println("在线链接下载"); System.out.println( ...
- Python 从 Excel 读取链接下载文件
Python 从 Excel 读取链接下载文件 import os from urllib.parse import urljoin, quote, unquoteimport requests im ...
- 百度网盘资源怎么分享群链接下载？
百度网盘是很多小伙伴都在使用的一款云存储软件,功能丰富且齐全,用户经常都会在这里分享交流文件资源,那要怎么在百度网盘分享群链接下载呢?下面小编就给大家带来详细的教程. 百度网盘资源怎么分享群链接下载? ...
- 前端通过url链接下载文件
前端通过url链接下载文件 网上找到几个相关的方法,如下 // 方法一: const form = document.createElement('form'); form.setAttribute( ...
最新文章
- html语言剖析,HTML语言剖析(十三) 其他标记
- MongoDB学习笔记一ID自增长
- 后端返回数据带有标签_越来越火的图数据库究竟是什么？是否在制造企业可以应用...
- 华东政法大学教学管理系统_中国科学技术大学1022万采购3包生命科学仪器
- [Unity][ShaderGraph][FlowCanvas] SetFloat 无效：通过脚本控制 shader 的动态参数时需要使用参数的引用名
- CV《物体识别与检测4 - 人脸验证》
- Linux环境下基于策略的路由
- linux上的 heartbeat 双机热备服务架设
- 第十六讲：菜单 Android Menu（转）
- 数据库系统概论第五版课后习题答案王珊
- 计算机专业毕业论文选题方向,计算机毕业方向论文选题 计算机毕业论文题目选什么比较好...
- jade的基本使用方法
- 商业软件太贵？找开源替代品
- 今日小程序推荐：文艺青年必备「轻芒杂志」
- 小胡的第一篇Blog
- 可以几分钟快速对接支付宝APP支付和手机网站支付？
- shell之读取/etc/passwd中user及其id
- 沈阳理工大学计算机考研资料汇总
- 【产业互联网周报】互联网集体进入调整期：张勇兼任阿里云总裁，卢伟冰晋升小米集团总裁，小鹏组织架构调整；...
- npm创建angular项目
热门文章