标签的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. tornado框架设置

    路由 import tornado.ioloop #开启循环 让服务器一直等待请求的到来 import tornado.web #框架基本功能封装在此模块 #例子 class MainHendler( ...

  2. Python中的split()函数的用法

    函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...

  3. Logistic Regression(逻辑回归)

    分类是机器学习的一个基本问题, 基本原则就是将某个待分类的事情根据其不同特征划分为两类. Email: 垃圾邮件/正常邮件 肿瘤: 良性/恶性 蔬菜: 有机/普通 对于分类问题, 其结果 y∈{0,1 ...

  4. Linux连接虚拟机及操作指令

    Linux的安装(虚拟机环境)与基础配置   一.背景 本文介绍如何安装虚拟机VMware以及如果在虚拟机上安装Linux系统以及Linux安装完毕之后的基础配置 需要准备的东西有VMware以及Li ...

  5. 【译】深度双向Transformer预训练【BERT第一作者分享】

    目录 NLP中的预训练 语境表示 语境表示相关研究 存在的问题 BERT的解决方案 任务一:Masked LM 任务二:预测下一句 BERT 输入表示 模型结构--Transformer编码器 Tra ...

  6. 浅谈Spring

    参考文章: https://www.ibm.com/developerworks/cn/java/j-lo-spring-principle/ 参考书籍: <SPRING技术内幕:深入解析SPR ...

  7. neo4j性能调优(转)

    最近在公司实习做的就是优化neo4j图形数据库查询效率的事,公司提供的是一个在Linux上搭建且拥有几亿个节点的数据库.开始一段时间主要是熟悉该数据库的一些基本操作,直到上周才正式开始步入了优化数据库 ...

  8. vue-cli脚手架中webpack配置基础文件详解

    一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...

  9. C#使用File.Create()创建文件后资源被占用

    由于文件被占用不能读写,所以报错“另一个程序正在使用此文件进程无法访问” 解决方法是在创建文件后立即Dispose掉 File.Create(path).Dispose();

  10. spring boot 常见的第三方集成

    spring boot基于1.x. 一 集成redis 1.1 配置 spring.redis.host = localhost spring.redis.port = 6379 spring.red ...