首页 前端知识 vue中下载文件的几种方式

vue中下载文件的几种方式

2024-03-12 01:03:41 前端知识 前端哥 135 330 我要收藏

以下是个人项目中下载文件常用的两种方式:

1. 前端通过a标签下载:

<a target="_blank" :download="scope.row.name" :href="scope.row.url" :name="scope.row.name" >下载</a>
复制

2. 前端通过fetch下载:

<el-button type="text" size="small" @click="downloadFile(scope.row.url, scope.row.name)">下载</el-button>
async downloadFile(url, name){
let response = await fetch(url)
// 内容转变成blob地址
let blob = await response.blob()
// 创建隐藏的可下载链接
let objectUrl = window.URL.createObjectURL(blob)
let a = document.createElement('a')
a.style.display = "none";
//地址
a.href = objectUrl
//修改文件名
a.download = name
// 触发点击
document.body.appendChild(a)
a.click()
//移除
URL.revokeObjectURL(a.href);
},
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3658.html
标签
评论
发布的文章

jquery监听input值改变

2024-04-08 11:04:31

jquery 笔记

2024-04-08 11:04:27

jQuery Ajax前后端数据交互

2024-04-08 11:04:24

JQuery入门基础

2024-02-20 10:02:06

JQuery中的事件对象

2024-04-08 11:04:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!