vue中下载文件的几种方式

最新推荐文章于 2024-04-05 01:04:09 发布

前端可樂

最新推荐文章于 2024-04-05 01:04:09 发布

阅读量4.5k

点赞数 1

分类专栏： Vue fetch 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67460846/article/details/134378930

版权

Vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

fetch

2 篇文章 0 订阅

订阅专栏

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

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);
    },