`
huangyongxing310
  • 浏览: 490280 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

vue 实现文件下载

 
阅读更多
vue 实现文件下载



https://forum.vuejs.org/t/vue/25491/3
https://www.cnblogs.com/yulj/p/8494465.html


项目里刚刚写的,不知道符合不
// params 参数 路径 文件名
downLoadMix(params, url, title) {
axios({
method: ‘post’,
url,
headers: {
‘Content-Type’: ‘application/json’
},
data: params,
responseType: ‘arraybuffer’
}).then(res => {
let headers = res.headers;
let blob = new Blob([res.data], {
type: headers[‘content-type’]
});
let link = document.createElement(‘a’);
link.href = window.URL.createObjectURL(blob);
if (!title) {
const fileName = headers[‘content-disposition’];
title = fileName.includes(‘filename=’) ? fileName.split(’=’)[1] : ‘下载的表单文件’;
}
link.download = title;
link.click();
});
}




new Blob([res.data]这个是关键


分享到:
评论

相关推荐

    vue实现点击按钮下载文件功能

    在Vue.js框架中实现点击按钮下载文件的功能,可以通过结合HTML的`<a>`标签和Vue.js的事件绑定机制来实现。...同时,本文也提供了一定的参考借鉴价值,尤其适合需要在Vue项目中实现文件下载功能的开发人员。

    在VUE中实现文件下载并判断状态的方法

    在Vue.js框架中,实现文件下载并判断下载状态是常见的需求,特别是在处理用户交互和数据传输时。本篇文章将详细介绍如何在Vue项目中实现这一功能,并通过Axios库来管理HTTP请求。 首先,我们需要引入Axios库,它是...

    springboot+vue实现超大文件分片极速上传与下载完整前后端源码

    在本项目中,"springboot+vue实现超大文件分片极速上传与下载完整前后端源码" 是一个综合性的IT应用,它结合了Spring Boot后端框架与Vue.js前端框架,旨在创建一个高效、可靠的文件管理系统。这个系统能够处理大容量...

    vue实现Excel文件的上传与下载功能的两种方式

    1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >...

    Vue调用SpringBoot后台实现文件下载功能

    本案例探讨的就是如何使用Vue调用SpringBoot后台来实现文件下载功能,这对于构建交互性强、用户体验良好的Web应用来说是必不可少的。 首先,我们需要了解Vue.js的基本知识。Vue是一个轻量级的JavaScript框架,它...

    .netcore+vue 实现压缩文件下载功能.docx

    .NET Core + Vue 实现压缩文件下载功能 .NET Core + Vue 实现压缩文件下载功能是指使用 .NET Core 作为后端框架和 Vue 作为前端框架实现压缩文件下载功能的技术方案。该方案的主要目的是为了解决在实施人员配置好的...

    vue实现文件分割与合并

    在Vue.js中,我们可以使用JavaScript的Blob API来实现文件的读取和分割。Blob对象表示一个不可变的、原始数据的类文件对象。通过`slice()`方法,我们可以对Blob对象进行切割,生成新的Blob子对象。以下是一个简单的...

    VUE + java 文件下载

    实现在浏览器前端点击后的文件下载。 不是整个工程代码,只把涉及到下载用的前端的代码和后端的代码贴出来了,可以直接复制使用,有详细的步骤。 包含了前端在执行post请求的关键的参数哦!responseType: "blob

    vue实现在线简历编辑器(在线网页编辑)

    - **图片上传**:可以使用File API处理用户上传的头像或其他文档,通常配合后端API实现文件存储。 - **云存储服务**:如阿里云OSS、AWS S3等,用于存储用户上传的文件,提高访问速度和安全性。 5. **响应式设计**...

    Vue.js学习文档

    - **MVVM 模式**:Vue.js 采用了 MVVM(Model-View-ViewModel)架构模式,其中 ViewModel 层负责绑定 Model 和 View 两层,实现数据与视图之间的自动同步。 - **指令**:Vue.js 提供了一系列内置指令,如 `v-if`、`v...

    Vue实现文件预览,支持word excel pdf ppt image txt mp4等格式

    在Vue.js开发中,有时我们需要实现前端文件预览功能,以提供用户在不下载文件的情况下查看内容。这个功能尤其适用于word文档、excel表格、pdf、ppt演示文稿、图像、文本文件、json数据以及视频文件如mp4。下面将详细...

    AGV WCS控制系统VUE实现

    在"AGV WCS控制系统VUE实现 WebSocketHelp"中,我们可以推测项目的核心是利用Vue.js构建交互式的用户界面,并结合WebSocket技术实现实时通信,以便与后台服务器进行高效的数据交换,监控AGV的状态并发出控制指令。...

    Vue实现简易翻页效果源码分享

    ### Vue实现简易翻页效果知识点详解 #### 知识点概述 本文将详细阐述如何使用Vue.js实现一个简易的翻页效果。通过分析给定的源码,我们将学习Vue的基础用法,事件处理,以及如何通过计算属性来实现分页逻辑。以下...

    vue+element实现大文件上传

    vue+element实现大文件上传

    springboot+vue实现文件上传下载

    本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...

    vue展示dicom文件医疗系统的实现代码

    标签“vue展示dicom文件”和“vue dicom”概括了文档的主题和关键词,这有助于搜索引擎优化以及开发者快速定位相关信息。 在内容部分,我们看到了实际的Vue组件代码片段,这些代码展示了如何在Vue.js应用中利用...

Global site tag (gtag.js) - Google Analytics