-
vue实现文件下载
2021-01-21 18:30:16Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ 一、使用步骤 展示文件,文件点击后查看方法为handlePreview <span style=...vue中文件下载
前言
Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’
一、使用步骤
展示文件,文件点击后查看方法为handlePreview
<span style="margin-top:50px;">附件</span> <el-upload action="" list-type="text" :on-preview="handlePreview" disabled :file-list="fileList"> <i class="el-icon-plus"></i> </el-upload>
二、使用步骤
1.设置文件返回类型
config.responseType='blob'
如图所示:
2.前端请求接口方法
handlePreview(file) { let data={} let typeArray=file.url.split(".") let type=typeArray[typeArray.length-1] debugger data.url=file.url data.name=file.name fileupload._getDownLoad(data).then((res) => { let url = window.URL.createObjectURL(new Blob([res])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', file.name) document.body.appendChild(link) link.click() }) }
3.后端返回文件接口
@RequestMapping(value = "/getDownLoad", method = RequestMethod.POST) public void getDownLoad(HttpServletResponse response,@RequestBody Imgurl imgurl) throws IOException { FileInputStream inputStream = null; try{ File file = new File(imgurl.getUrl()); inputStream = new FileInputStream(file); ByteArrayOutputStream os = new ByteArrayOutputStream(); byte[] buffer = new byte[1024]; int length; while ((length = inputStream.read(buffer)) != -1) { os.write(buffer, 0, length); } byte[] data = os.toByteArray(); response.resetBuffer(); response.resetBuffer(); response.setHeader("Content-Disposition", "attachment"); response.addHeader("file-name",URLEncoder.encode(imgurl.getName(), "UTF-8")); response.addHeader("Content-Length", "" + data.length); response.setContentType("application/octet-stream; charset=UTF-8"); IOUtils.write(data,response.getOutputStream()); } catch (IOException e) { e.printStackTrace(); } finally { if(inputStream != null) { inputStream.close(); } } }
总结
今天遇到一个vue下载文件的开发功能,按照正常方法请求一直报错,经过请教大神,用a链接简单的方法实现,本文仅仅简单记录自己的开发过程。
-
VUE实现文件下载
2019-02-01 15:52:30// 下载文件 download (data,row) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = ...第一:请求的responseType为blob,以post请求为例:
downloadClick(row){ let entity = { id: row.id, filename: row.filename, } this.$http.post('/v1/FileManage/downloadFile', entity ,{responseType: 'blob'}).then((response)=> { this.download(response.body,row) }); },
第二步:请求成功,拿到response里面的数据后,调用download函数(创建a标签,设置download属性,插入到文档中并click)
methods: { // 下载文件 download (data,row) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url // 获取文件名 // download 属性定义了下载链接的地址而不是跳转路径 link.setAttribute('download', row.filename) document.body.appendChild(link) link.click() } }
传送门:后台代码:https://blog.csdn.net/mibi8840/article/details/86742134
-
Vue 实现文件下载
2018-11-29 10:33:36功能:点击导出按钮,提交请求,下载excel文件; 第一步:跟后端确认交付的接口的response header设置了 response header 以及返回了文件流。 第二步:修改axios请求的responseType为blob,以post请求为例: axios({...功能:点击导出按钮,提交请求,下载excel文件;
第一步:跟后端确认交付的接口的response header设置了
response header
以及返回了文件流。
第二步:修改axios请求的responseType为blob,以post请求为例:
axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response => { this.download(response) }).catch((error) => { })
第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)
methods: { // 下载文件 download (data) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'excel.xlsx') document.body.appendChild(link) link.click() } }
vue实现word或pdf文档导出的功能,后端返回一个文档流(下图),然后前端对文档流做处理进行下载,
import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/msword` //word文档为msword,pdf文档为pdf }); let objectUrl = URL.createObjectURL(blob); let link = document.createElement("a"); let fname = `我的文档`; //下载文件的名字 link.href = objectUrl; link.setAttribute("download", fname); document.body.appendChild(link); link.click(); }else { this.$message({ type: "error", message: "导出失败" }) } })
两种方式任选
-
JAVA Vue实现文件下载
2020-11-27 16:09:32JAVA Vue实现文件下载 后台controller @GetMapping("/DownloadWorkorderFile") @ResponseBody public void DownloadWorkorderFile(HttpServletRequest request, HttpServletResponse response, String filePath){...后台controller
@GetMapping("/DownloadWorkorderFile") @ResponseBody public void DownloadWorkorderFile(HttpServletRequest request, HttpServletResponse response, String filePath){ File file = new File(filePath); // 取得文件名。 String fileName = file.getName(); InputStream fis = null; try { fis = new FileInputStream(file); request.setCharacterEncoding("UTF-8"); String agent = request.getHeader("User-Agent").toUpperCase(); if ((agent.indexOf("MSIE") > 0) || ((agent.indexOf("RV") != -1) && (agent.indexOf("FIREFOX") == -1))) fileName = URLEncoder.encode(fileName, "UTF-8"); else { fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1"); } response.reset(); response.setCharacterEncoding("UTF-8"); response.setContentType("application/force-download");// 设置强制下载不打开 response.addHeader("Content-Disposition", "attachment;filename=" + fileName); response.setHeader("Content-Length", String.valueOf(file.length())); byte[] b = new byte[1024]; int len; while ((len = fis.read(b)) != -1) { response.getOutputStream().write(b, 0, len); } response.flushBuffer(); fis.close(); }catch (IOException e) { throw new RuntimeException(e); } }
前端Vue
<template> <div> <el-button type="primary" @click="download">下载</el-button> </div> </template> <script> export default { data() { return { }; }, methods: { // 下载事件 download() { var path = '/home/axs-spring/data/ceshi.png'; window.open("http://localhost:8041/Management/DownloadWorkorderFile?filePath=" + encodeURI(path)); }, } }; </script>
-
Springboot+Vue实现文件下载功能
2020-04-06 11:40:39Springboot+Vue实现文件下载功能 之前写文件下载功能,看网上的代码很复杂,不容易懂(网上的博客越来越没水平,不知道是不是百度搜索引擎的问题),其实挺简单的,下面我分享下代码及效果 后端 package ... -
vue实现文件下载功能
2020-12-24 14:40:48对于Vue中实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。 api.js配置 export default { ... -
Grails & vue实现文件下载
2020-11-04 21:25:38vue中实现文件下载其实很简单,直接给出超级链接即可。比如: <a href="下载文件的链接">提示信息</a> 如果与Grails配合,相应的后台代码: def downLoadFile(params) { def result = [] if ... -
springBoot+vue实现文件下载功能
2020-04-28 22:50:16springBoot+vue实现文件,图片浏览器下载功能 前端请求 export function down(id){ return request({ url:'/file/upload/down/'+id, method:'get', **responseType:'blob'** }) } 前端请求方法 引入请求的方法... -
vue实现文件下载的两种方式
2019-05-29 21:27:10将列表数据导出到excel文件,下载到本地 <button @click="exportFile">导出</button> 代码实现 调用接口,将后端返回的流数据new一个文件对象 exportFile () { Vue.prototype.$axios[method](... -
SpringBoot+Vue实现文件下载
2019-07-04 15:35:491、前台vue代码,没有使用axios,用的是this.$http.post来实现的 this.$http({ url: this.$http.adornUrl('/stats/importExportUsers/downloadTemplate'), method: 'post', responseType: 'arraybuffer' }).... -
SpringBoot+VUE实现文件下载功能
2020-12-10 16:26:33需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试) 后端接口: 我是直接在controller层写的。 在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件... -
VUE实现文件下载;zip文件也可以下载,干货
2020-06-19 14:19:17// vue 中的调用方法 handleModelUpload() { alert('下载zip模板') axios({ method: 'GET', url: '/business/api/download', // params: { // // eslint-disable-next-line no-undef // reportRuleId: row.... -
SpringBoot+vue实现文件下载心得
2020-07-31 17:32:201.文件下载接口要用Get,而不是Post,使用post会出现很多问题,尤其是在前端解析数据的时候,只能拿到一串二维码。 2.axios路径参考:this.$axios.get("/a/review/download/a.jpg",{ responseType:'blob' }) 3.若... -
前端Vue实现文件下载提示 失败-未发现文件的解决思路
2020-11-05 16:59:29文件下载提示 失败-未发现文件的解决思路 前端vue中动态创建a标签下载文件 <div name="downloadfile" onclick="downloadClick()">下载模板</div> //下载模板 downloadClick:function(event){ var link ... -
python+vue实现文件下载,(导出EXCEL文件,下载.zip等文件功能)
2020-04-15 19:31:11一、公司项目需求要求导出表格数据,以excel文件导出,后端python处理已经可以直接将数据导出并生成Excel文件,但是前后台传输是不... * vue从后台获取数据,并导出EXCEL文件 * @param value * @returns {*} * @c...
收藏数
1,408
精华内容
563