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文档
猜你喜欢
  • 前端vue中怎么实现文件下载
    这篇文章主要介绍了前端vue中怎么实现文件下载的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇前端vue中怎么实现文件下载文章都会有所收获,下面我们一起来看看吧。第一种方式 前端创建超链接,通过a标签向...
    99+
    2023-07-06
  • 前端vue+express怎么实现文件的上传下载
    本篇内容主要讲解“前端vue+express怎么实现文件的上传下载”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“前端vue+express怎么实现文件的上传下载”吧!新建server.jsyar...
    99+
    2023-06-22
  • 前端vue中实现文件下载的几种方法总结
    目录第一种方式 第二种方式第三种方式第四种方式总结第一种方式  前端创建超链接,通过a标签向后端发送get请求,需要给a标签添加一个download属性 这种写法...
    99+
    2023-05-15
    前端vue vue文件下载 vue实现文件下载
  • 前端vue+express实现文件的上传下载示例
    新建server.js yarn init -y yarn add express nodemon -D var express = require("express"); cons...
    99+
    2024-04-02
  • nodejs实现生成文件并在前端下载
    目录nodejs生成文件并在前端下载前端后端nodejs下载文件问题第一种方式:使用原生的http模块第二种方式:使用Express+Axios下载文件总结nodejs生成文件并在前...
    99+
    2024-04-02
  • 前端vue中文件下载的三种方式汇总
    目录前端vue中文件下载的三种方式附:vue实现图片或文件下载功能实例总结前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端...
    99+
    2024-04-02
  • vue实现zip文件下载
    本文实例为大家分享了vue实现zip文件下载的具体代码,供大家参考,具体内容如下 el-button按钮 <el-button size="mini" type="succ...
    99+
    2024-04-02
  • 前端vue a链接下载文件失败的问题(未发现文件)
    目录前端vue a链接下载文件失败(未发现文件)错误案例完整代码vue点击下载的避坑指南引入避坑之路blob对象前端vue a链接下载文件失败(未发现文件) 错误案例 发现出现错误...
    99+
    2024-04-02
  • 前端axios如何下载excel文件
    小编给大家分享一下前端axios如何下载excel文件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!需求:通过后端接口下载exc...
    99+
    2024-04-02
  • Springboot导出文件,前端下载文件方式
    Springboot导出文件,前端下载文件 后端代码 可以把请求设置为post,我这里是Get @RequestMapping(value = "/download", met...
    99+
    2024-04-02
  • vue实现文件上传和下载
    本文实例为大家分享了vue实现文件上传和下载的具体代码,供大家参考,具体内容如下 文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是...
    99+
    2024-04-02
  • vue中怎么下载excel流文件及设置下载文件名
    这篇文章给大家分享的是有关vue中怎么下载excel流文件及设置下载文件名的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。概述导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据...
    99+
    2023-06-15
  • Springboot怎么实现前后端分离excel下载
    本篇内容介绍了“Springboot怎么实现前后端分离excel下载”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Springboot前后端...
    99+
    2023-06-25
  • 后端接口返回文件流格式、前端如何实现文件下载导出呢?
    在项目开发过程中,难免会需要实现文件下载功能,记录下自己实际开发过程过程中遇到两种实现的方式。一种:后端直接返回加密url ,前端解密后直接使用 a标签下载就可以,这种方法相等比较简单,另一种:后端接...
    99+
    2023-09-02
    前端 java javascript
  • C#中怎么实现一个文件下载
    这篇文章给大家介绍C#中怎么实现一个文件下载,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先,打开Visual Studio.Net,新建一个Visual C# Windows应用程序的工程,不妨命名为\"...
    99+
    2023-06-17
  • Vue怎么实现文件批量打包压缩下载
    在Vue中实现文件的批量打包压缩下载可以通过以下步骤来实现: 首先,创建一个按钮或者其他触发下载的元素,当用户点击这个按钮时触发...
    99+
    2024-03-08
    vue
  • Android中怎么实现文件下载功能
    今天就跟大家聊聊有关Android中怎么实现文件下载功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。普通单线程下载文件:直接使用URLConnection.openStream()...
    99+
    2023-05-31
    android
  • 前端使用axios实现下载文件功能的详细过程
    目录1、需求描述2、问题分析3、解决方案4、代码实现总结1、需求描述 在前后端分离开发的项目中,前端无论使用Vue或React哪种框架,发送HTTP请求都会使用Ajax异步请求的方式...
    99+
    2022-11-13
    axios 下载文件 axios下载excel文件 axios怎么下载
  • vue+django实现下载文件的示例
    目录一、概述二、django项目三、vue项目一、概述 在项目中,点击下载按钮,就可以下载文件。 传统的下载链接一般是get方式,这种链接是公开的,可以任意下载。 在实际项目,某些...
    99+
    2024-04-02
  • 怎么在vue中使用django实现一个文件下载功能
    这篇文章将为大家详细讲解有关怎么在vue中使用django实现一个文件下载功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、概述在项目中,点击下载按钮,就可以下载文件。传统的下载链接一般...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作