标签的download: 是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。

这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存

downloadFile(content, filename) {
filename = filename || 'license';
const blob = new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
navigator.msSaveBlob(blob, filename);
} else { // 非IE
let aTag = document.createElement('a');
aTag.download = filename;
aTag.href = URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(aTag.href);
}
}

axios处理:我们发送请求的时候一定要写上responseType,{responseType:'arraybuffer'} 否则下载下来的文件打不开

axios.post('/fileSys/download', {
fileId: 'xxx'
},{
responseType:'arraybuffer'
}).then({
downloadFile(res.data.file, res.data.fileName);
}).catch(function (error) {
console.log(error)
})

文件上传:利用ES6的fromData来实现

function uploadFile (file) {
let formdata = new FormData()
formdata.append('file', file)
formdata.append('submit', false)
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post('/sysFile/upload', formdata, config).then(this.sendFileSucc)
}

 附:正常文件流下载(借助 xmlHttpRequest2

/**
* @url {String}: 下载请求路径
* @filename {String}: 文件名
**/
function downByUrl(url,filename) {
filename = filename || 'omc.lic';
var req = new XMLHttpRequest();
req.open("GET", url, true);
//监听进度事件
req.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false); req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([req.response], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([req.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
}
};
req.send();
}

vue版 文件下载的更多相关文章

  1. React版/Vue版都齐了,开源一套【特别】的后台管理系统...

    本项目主要基于Elux+Antd构建,包含React版本和Vue版本,旨在提供给大家一个简单基础.开箱即用的后台管理系统通用模版,主要包含运行环境.脚手架.代码风格.基本Layout.状态管理.路由管 ...

  2. vue版 弹幕

    效果: 下载 优化版下载: https://pan.baidu.com/s/1mvKGwJsBjXd2hvvi5Rp9pA 用法: import barrage from '../components ...

  3. vue进行文件下载

    本文为博主原创,未经允许不得转载: 总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:aja ...

  4. vue+springboot文件下载

    //vue element-ui <el-button size="medium" type="primary" @click="downloa ...

  5. 对Web(Springboot + Vue)实现文件下载功能的改进

    此为 软件开发与创新 课程的作业 对已有项目(非本人)阅读分析 找出软件尚存缺陷 改进其软件做二次开发 整理成一份博客 原项目简介 本篇博客所分析的项目来自于 ジ绯色月下ぎ--vue+axios+sp ...

  6. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  7. 百度分享vue版-vshare

    vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...

  8. vue版 文字滚动

    用法:<marque :text="bannerText"></marque> 下载

  9. vue导出文件下载

    项目当中有用到文件的导出功能,以此来总结 request({ /*url: this.exportUrl,*/ url: `************`, method: "GET" ...

随机推荐

  1. LoadRunner 安装汉化后的一些问题

    我装好LoadRunner11后,按照下面的方法破解: 1.  把loadrunner相关程序全部退出: 2.  用LR8.0中的mlr5lprg.dll.lm70.dll覆盖LR9.5安装目录下“b ...

  2. sql server 报错处理

    1.错误:针对程序集 'StoreProc' 的 CREATE ASSEMBLY 失败,因为程序集 'StoreProc' 未获授权,不满足 PERMISSION_SET = UNSAFE.满足以下两 ...

  3. gitlab api 使用

    api文档:https://docs.gitlab.com/ee/api/projects.html#project-visibility-level 1.项目查询 http://127.0.0.1: ...

  4. Linux修改用户所在组方法

    Linux修改用户所在组方法 usermod -g 用户组 用户名强行设置某个用户所在组usermod -G 用户组 用户名把某个用户改为 group(s) usermod -a -G 用户组 用户名 ...

  5. win10以管理员身份运行cmd方法

    win10以管理员身份运行cmd方法 win8win10以管理员身份运行cmd方法1.直接到 C:\Windows\System32 下面找cmd.exe 右键以管理员方式打开就可以了 2.按WIN+ ...

  6. lombok踩坑与思考

    虽然接触到lombok已经有很长时间,但是大量使用lombok以减少代码编写还是在新团队编写新代码维护老代码中遇到的. 我个人并不主张使用lombok,其带来的代价足以抵消其便利,但是由于团队编码风格 ...

  7. alias命令详解

    1.简介: 设置指令的别名,用户可利用alias,自定指令的别名.若仅输入alias,则可列出目前所有的别名设置. alias的效力仅及于该次登入的操作.若要每次登入是即自动设好别名,可在/etc/p ...

  8. Taro开发微信小程序之初始化地图到当前位置

    在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //c ...

  9. 基于WebGL架构的3D可视化平台ThingJS-搭建设备管理系统

    国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑设备也是大量的.为了提高设 ...

  10. windows php exec()不生效问题

    开始 $cmd = 'java -jar C:/xampp/htdocs/dev_env/replace_word_content.jar'; 报错java不是内部命令 换成 $cmd = 'C:\P ...