vue 文件下载

最新推荐文章于 2024-04-20 20:07:34 发布
最新推荐文章于 2024-04-20 20:07:34 发布
阅读量573 收藏 4
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45555960/article/details/137050987
版权

1.返回路径下载

注: 针对一些浏览器无法识别的文件格式（如pdf、xls、ppt）。可以直接在地址栏上输入URL即可触发浏览器的下载功能。

情况1

 //地址栏输入文件URL
 window.location.href = URL
 window.open(URL)

注:该方式将下载逻辑放在后端处理，后端给出固定的url，前端使用window.location.herf下载
路径可以是相对路径也可以是绝对路径

情况2

注:直接下载 （使用a标签download属性）

<a  :href="scope.row.vPath" :download="scope.row.vName" class="downloadBtn">
      <el-button type="text">下载</el-button>
</a>

2.OSS存储方式的文件地址

注:这种方式的文件地址被访问时，访问文件路径默认是下载还是预览跟后端设置的服务器配置有关。

如果访问oss地址的文件只能预览，那么这种文件要下载的解决方式：

1.

  • 改为请求接口得到流的方式下载（可能面临大文件时接口请求时间非常长的问题）
  • 直接访问文件地址，在地址后添加参数 ?response-content-type=application%2Foctet-stream

链接如

https://XXX.XX.XXX:5443/alibaba/16583.pdf

<a href="http://xxxx/octet-stream" target="_blank" download="" ></a>

3.通过后端反回流,前端进行下载

代码详:<<vue Blob流及文件流下载>>篇:

平台返回二进制流格式如图

༺༽༾ཊ方觉ཏ༿༼༻
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 资源文件下载
07-07
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
在VUE中实现文件下载并判断状态的方法
10-16
今天小编就为大家分享一篇在VUE中实现文件下载并判断状态的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中下载不同文件的几种方式
热门推荐
前端程序猿的博客
08-07 1万+
当在Vue中需要实现文件下载功能时，我们可以有多种方式来完成。下面将介绍五种常用的方法。
【vue工作随笔】前端配合后端进行文件下载的方法记录
最新发布
2401_84093860的博客
04-20 1010
语法：window.open([URL], [窗口名称], [参数字符串])wendow.open如果里面放入的是文件，肯定是会下载文件的// 导入模块-下载模板});},实现效果：在页面下端下载文件，但是！！！文件名无法修改！！！
vue文件下载
笑到世界都狼狈的博客
03-15 2013
首先说明一下，在文件下载这边踩了个坑，花了好长时间才解决！就是后台给的接口返回的是一个二进制文件流，但是前端请求返回的结果将二进制文件流改成了字符串，所以导致下载一直不成功。这个方法是一个现成的下载组件，使用之前要先安装，在导入，然后跟方法二一样，接口调用成功后，调用方法fileDownload即可。如果你遇到文件下载不成功，且有使用mock.js的话，赶紧长点心，不然真的累死都不知道为啥一直下载不成功。接下来开始步入正题，我下面零零碎碎有好几种下载下载方法，大家可以根据自己的意愿选择下载方法。
Vue文件下载
L_Juan_Y的博客
02-20 379
背景 在Vue使用axios请求下载文件，通常前端向后端请求下载文件流，后端返回文件流再使用a标签链接点击进行下载的方式，但在测试过程中发现，遇到了在谷歌浏览器和火狐下没问题，IE浏览器无反应、文件乱码等问题…… 1.IE浏览器兼容问题 ## (1)原因 使用a标签进行下载的方式在IE下失效主要是因为IE浏览器下，不支持a标签的download属性，该属性只有Chrome和火狐支持。 (2) 解决方案 //这里res.data是返回的blob对象 // application/vnd.openxmlfo
vue 文件的下载
xm_w_xm的博客
06-14 450
我需要下载的东西在浏览器的下方展示出来 download(val) { this.furl = null; let param = { userId: this.$store.state.Login.userInfo.ID, deptId: this.$store.state.Login.userInfo.DEPARTMENTID, ...
vue 下载文件
毛茸茸的枫哥
03-20 1218
<templete> <span @click="download(contract.filePath)">下载</span> </templete> <script> module.exports = { methods: { download(filePath){ var self = this; ...
VUE + java 文件下载
03-29
前端vue，后端java。 如果前端是其他语言，可自行转换。 实现在浏览器前端点击后的文件下载。 不是整个工程代码，只把涉及到下载用的前端的代码和后端的代码贴出来了，可以直接复制使用，有详细的步骤。 包含了前端...
vue批量下载.vue
01-07
vue批量下载.vue
vue实现点击按钮下载文件功能
10-16
主要介绍了vue中点击按钮下载文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue调用SpringBoot后台实现文件下载功能
04-02
该案例实现前端Vue通过axios请求SpringBoot后台，实现文件下载功能。 filepack ： 前端项目 8081端口。 fileServer： 后端项目 8080端口。
vue+axios实现post文件下载
10-16
主要为大家详细介绍了vue+axios实现post文件下载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE 下载文件
计算机辅助工程
07-27 578
vue下载文件
vue中文件下载
rain_pen的博客
07-11 322
2.如果项目内有引入mock.js,做了mock数据，删除mock依赖，因为mock数据回重置请求，使设置的responseType失效。
Vue 实现文件的下载
qq_32900003的博客
07-07 450
<Button type="primary" @click="exportMoudle"><Icon type="ios-download-outline"></Icon>下载模板</Button> exportMoudle:function(){ let link = document.createElement('a'); //创建a标签 link.style.display = 'no.
Vue实现文件下载
qq_54257938的博客
12-17 1万+
Vue文件下载的简单实现
vue实现文件下载
weixin_41696001的博客
04-16 1万+
前段时间做一个文件导出的功能， 由于文件是通过post方法从服务器获取， 发现下载文件时， 如果文件没有后缀， 浏览器会自动添加一个txt的后缀给文件，查了资料， 解决方法用了下面的第六种 文件下载有很多种方式，本文主要介绍7种 一、a标签下载 <body> <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">a标签下载</button&gt.
springboot+vue文件下载
06-28
### 回答1： Spring Boot + Vue 文件下载可以通过以下步骤实现： 1. 在 Vue 中创建一个下载按钮，当用户点击该按钮时，发送一个请求到后端。 2. 在 Spring Boot 中创建一个 RESTful API，该 API 接收文件下载请求，并返回文件的字节流。 3. 在 Vue 中接收到后端返回的文件字节流后，使用 Blob 对象将其转换为文件，并通过浏览器下载该文件。 具体实现细节可以参考以下链接： https://www.baeldung.com/spring-boot-file-download https://www.tutorialspoint.com/vuejs/vuejs_file_download.htm ### 回答2： Spring Boot是一种开源的Java框架，它提供了一个快速搭建Java Web应用程序的方法。Vue.js是一个非常流行的JavaScript框架，它提供了一个高效且易于使用的前端开发平台。在一些复杂的Web应用中，文件下载是必不可少的一个功能，尤其是在网站中提供一些用户需要的PDF、图片、动画或其他二进制文件。本文将会讨论在Spring Boot框架下如何使用Vue.js实现文件下载。 1. 后端实现： 首先，我们需在后端实现下载文件的接口。使用Spring Boot框架的话，我们需要建立一个Restful的API接口来实现该功能。具体实现方式如下： @GetMapping(value = "/downloadFile") public ResponseEntity<byte[]> downloadPostmanCollectionFile() throws FileNotFoundException { byte[] fileData = getFileData();//获取文件数据 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF);//设置Content-Type为PDF headers.setContentDispositionFormData("attachment", "test.pdf");//设置响应头信息 headers.setContentLength(fileData.length); return new ResponseEntity<>(fileData, headers, HttpStatus.OK);//返回ResponseEntity对象 } 需要注意的是，我们需要根据实际需求设置Content-Type和对应的文件名。 2. 前端实现： 在Vue.js中实现文件下载功能需要通过发送请求来触发后端服务的下载方法。需要使用axios或者其他类似的网络请求库实现。具体代码如下： methods: { downloadFile () { axios({ method: 'get', url: '/downloadFile', responseType: 'blob' }).then(res => { const url = window.URL.createObjectURL(new Blob([res.data])) const link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'test.pdf') document.body.appendChild(link) link.click() document.body.removeChild(link) }) } } 在该代码中，我们首先向后端发送请求，后端会返回一个二进制数据流(blob)。我们将数据封装成一个Blob对象，并将其转换为一个URL，然后通过a标签创建一个下载链接，并模拟点击该链接即可实现文件的下载。需要注意的是，我们需要根据实际返回的响应格式设置responseType属性。 综上所述，Spring Boot Vue文件下载功能的实现方法就是创建一个Restful后端接口，并在前端使用axios向该接口发送请求，获取文件数据，并将其转换为Blob对象，创建下载链接即可。如果使用Vue.js作为前端框架，可以通过一个函数封装下载的全部过程，实现一键下载的功能。 ### 回答3： Spring Boot Vue文件下载需要在后端代码中构建下载文件的接口，同时在前端代码中实现文件下载的功能。以下是具体实现步骤： 1.后端代码实现 在Spring Boot中，需要通过编写Controller的方法来生成下载文件的接口。下面是一个简单的示例： ``` @GetMapping("/download") public ResponseEntity<Object> downloadFile() throws IOException { String fileName = "example.txt"; File file = new File(fileName); InputStreamResource resource = new InputStreamResource(new FileInputStream(file)); HttpHeaders headers = new HttpHeaders(); headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getName())); headers.add("Cache-Control", "no-cache, no-store, must-revalidate"); headers.add("Pragma", "no-cache"); headers.add("Expires", "0"); return ResponseEntity.ok() .headers(headers) .contentLength(file.length()) .contentType(MediaType.parseMediaType("application/octet-stream")) .body(resource); } ``` 该方法首先创建一个文件对象，然后将文件的内容转换成字节流。之后使用ResponseEntity对象返回文件内容，同时设置HTTP头信息，将要下载的文件名和类型等信息传递给客户端。 2.前端代码实现 在Vue中，可以使用Axios工具来调用后端的接口，并向接口传递需要下载的文件名等参数。下面是一个简单的示例： ``` <template> <button @click="downloadFile">下载文件</button> </template> <script> import axios from 'axios'; export default { name: 'DownloadFileButton', methods: { downloadFile() { axios.get('/download?fileName=example.txt', { responseType: 'blob' }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'example.txt'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }) .catch(error => { console.log(error); }) } } } </script> ``` 该示例中，当用户点击“下载文件”按钮时，会调用downloadFile方法。这个方法向服务器发送HTTP请求，请求下载名为“example.txt”的文件。Axios请求的responseType设为‘blob’，以确保服务器返回的数据可以正确处理。接着，在成功处理响应数据后，将响应数据构造成Blob对象并生成一个下载链接，通过设置HTML元素的属性来触发下载操作。 3.总结 通过以上步骤，我们可以实现Spring Boot Vue文件下载的功能。在后端代码中，需要提供文件下载的接口，并在返回的HTTP头信息中添加下载文件的文件名、文件类型等信息。在前端代码中，需要使用Axios向后端发送请求，并实现下载文件的功能。同时，为了确保下载链接能够被正确处理，需要将响应数据构造成Blob对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值