iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >前端vue中怎么实现文件下载
  • 825
分享到

前端vue中怎么实现文件下载

2023-07-06 03:07:43 825人浏览 安东尼
摘要

这篇文章主要介绍了前端Vue中怎么实现文件下载的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇前端vue中怎么实现文件下载文章都会有所收获,下面我们一起来看看吧。第一种方式 前端创建超链接,通过a标签向

这篇文章主要介绍了前端Vue中怎么实现文件下载的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇前端vue中怎么实现文件下载文章都会有所收获,下面我们一起来看看吧。

第一种方式 

前端创建超链接,通过a标签向后端发送get请求,需要给a标签添加一个download属性

这种写法是创造了一个a标签,把地址写到a标签里再用js调用点击,实现访问文件地址就是下载了

代码如下:

   <a       @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)"     >下载</a>// 参数分别是:文件的路径 文件的名字 文件的id 文件的类型
  downloadFile(url, fileName, flieId, type) {     let link = document.createElement('a');     link.style.display = 'none';     link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId;     document.body.appendChild(link);     link.click();   },

或者

<a :href='"/user/downloadexcel"' >下载模板</a>//另一种情况是创建div标签,动态创建a标签:<div name="downloadfile" "downloadExcel()">下载</div>function downloadExcel() {    let a = document.createElement('a')    a.href ="/xxx/xxx"    a.click();}

第二种方式

通过window.open()下载

window.open就是打开了一个新网页直接在新网页访问文件地址了,只要访问文件地址,就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了

  downloadFile() {    window.open(      baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',      '_self'    );  },

第三种方式

通过创建iframe的方式:

<el-button  size="mini" @click="handleExport(scope.row)">导出</el-button>//method方法:handleExport(row) {      var elemIF = document.createElement('iframe')      elemIF.src = 'user/downloadExcel?snapshotTime=' + fORMatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +                    '&cateGory=' + row.category       elemIF.style.display = 'none'      document.body.appendChild(elemIF)    }

第四种方式

以文件流的形式,会对后端发post请求,使用blob格式,这种写法对于图片和pdf及svg能实现下载功能

<a @click="downloadFile(file.name, file.url)" >下载</a>  downloadFile(fileName, fileUrl) {      if (!fileUrl) {        return;      }      let url = window.URL.createObjectURL(new Blob([fileUrl]));      let link = document.createElement('a');      link.style.display = 'none';      link.href = url;      link.setAttribute('download', fileName);      document.body.appendChild(link);      link.click();    }

如果后端返回的格式是文件流形式的,就不用转换成Blob形式了。就可以直接简写为:

<a :href="src" rel="external nofollow"  download="name"/>

因为是文件流下载,所以在取后台数据的时候,要多传递一个【responseType: &lsquo;blob&rsquo;】这个参数

function downloadPost (config){  return new Promise((resolve,reject) => {    axiOS({        url: config.url,// 请求地址        method: 'post',        data: config.data,// 参数        responseType: 'blob'// 表明返回服务器返回的数据类型    }).then(res => {      resolve(res)    }).catch(err=>{      reject(err);    });  });}

如果后端提供的下载接口是get类型,可以直接使用方法一和二和三,简单又便捷;当然如果想使用方法四也是可以的,不过感觉有点舍近求远了。

如果后端提供的下载接口是post类型,就必须要用方法四了。

关于“前端vue中怎么实现文件下载”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“前端vue中怎么实现文件下载”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: 前端vue中怎么实现文件下载

本文链接: https://www.lsjlt.com/news/357521.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • C++ 生态系统中流行库和框架的贡献指南
    作为 c++++ 开发人员,通过遵循以下步骤即可为流行库和框架做出贡献:选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支,实现修复并添加测试。提交...
    99+
    2024-05-15
    框架 c++ 流行库 git
  • C++ 生态系统中流行库和框架的社区支持情况
    c++++生态系统中流行库和框架的社区支持情况:boost:活跃的社区提供广泛的文档、教程和讨论区,确保持续的维护和更新。qt:庞大的社区提供丰富的文档、示例和论坛,积极参与开发和维护。...
    99+
    2024-05-15
    生态系统 社区支持 c++ overflow 标准库
  • c++中if elseif使用规则
    c++ 中 if-else if 语句的使用规则为:语法:if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...
    99+
    2024-05-15
    c++
  • c++中的继承怎么写
    继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中,继承类型包括:单继承:一个子类从一个基类继承。多继承:一个子类从多个基类继承。层次继承:多个子类从同一个基类继承。多层...
    99+
    2024-05-15
    c++
  • c++中如何使用类和对象掌握目标
    在 c++ 中创建类和对象:使用 class 关键字定义类,包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括:公有、受保护和私有。数据成员是类的变量,每个对象拥有自己的副本...
    99+
    2024-05-15
    c++
  • c++中优先级是什么意思
    c++ 中的优先级规则:优先级高的操作符先执行,相同优先级的从左到右执行,括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表,其中赋值运算符具有最低优先级。通过了解优先级,可...
    99+
    2024-05-15
    c++
  • c++中a+是什么意思
    c++ 中的 a+ 运算符表示自增运算符,用于将变量递增 1 并将结果存储在同一变量中。语法为 a++,用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用,后者在表达式求值后递...
    99+
    2024-05-15
    c++
  • c++中a.b什么意思
    c++kquote>“a.b”表示对象“a”的成员“b”,用于访问对象成员,可用“对象名.成员名”的语法。它还可以用于访问嵌套成员,如“对象名.嵌套成员名.成员名”的语法。 c++...
    99+
    2024-05-15
    c++
  • C++ 并发编程库的优缺点
    c++++ 提供了多种并发编程库,满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大;异步库 (std::async) 可异步执行任务,但 api 复杂;协程库 ...
    99+
    2024-05-15
    c++ 并发编程
  • 如何在 Golang 中备份数据库?
    在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包,或第三方包如 github.com/go-sql-driver/mysql。具体步骤...
    99+
    2024-05-15
    golang 数据库备份 mysql git 标准库
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作