axio请求里必须加  responseType: 'blob' 参数,如下

//下载文件
api.download=function(id) {
return request({
url: this.baseUrl+'/download/'+id,
method: 'get',
params: {},
responseType: 'blob'
})
}

  

返回结果里面要做如下处理

.then( res => {
let blob = new Blob([res], {type: res.type})
let downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = fileName; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放blob对象 })

  

axios 下载文件的更多相关文章

  1. vue+axios下载文件的实现

    HTML代码: <el-button size="medium" @click="download">下载表格</el-button> ...

  2. vue element之axios下载文件(后端Python)

    axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuff ...

  3. ajax axios 下载文件时如何获取进度条 process

    最近项目需要做一个下载文件的进度条,看网上上传文件进度条下载,特分享出来方便大家查阅 <!DOCTYPE html> <html> <head>     <m ...

  4. vue中使用axios下载文件,兼容IE11

    一.设置axios返回值为blob 二.使用a标签的down属性下载,如果是IE浏览器,可以使用navigator.msSaveBlob进行下载 // data的数据类型是blob downloadF ...

  5. axios下载文件乱码问题 无法解压 文件损坏

    /* 下载附件 */ downloadFile(fileName) { // window.open(url); var that = this; var url = "PO2116&quo ...

  6. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  7. axios 利用new FileReader() 下载文件获取返回的错误信息

    this.axios({           method: "post",           url: url,           data: data,           ...

  8. vue axios post请求下载文件,后台springmvc完整代码

     注意请求时要设置responseType,不加会中文乱码,被这个坑困扰了大半天... axios post请求:     download(index,row){         var ts =  ...

  9. axios通过post请求下载文件/图片

    我们平常下载文件一般都是通过get请求直接访问进行下载, 但是当有特殊情况如权限控制之类的会要求我们通过post请求进行下载,这时就不一样了, 具体方法是通过协调后端,约定返回的文件流,请求的resp ...

随机推荐

  1. Vue组件的操作-自定义组件,动态组件,递归组件

    作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...

  2. [LeetCode] 674. Longest Continuous Increasing Subsequence 最长连续递增序列

    Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...

  3. [LeetCode] 227. Basic Calculator II 基本计算器之二

    Implement a basic calculator to evaluate a simple expression string. The expression string contains ...

  4. [LeetCode] 70. Climbing Stairs 爬楼梯问题

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  5. python实现的WebSocket客户端

    code #coding=utf- import json import time from websocket import create_connection ws = create_connec ...

  6. jenkins 更新插件使用代理

    方法一: 管理插件页面配置如下: 这个 URL 改成http://mirror.xmission.com/jenkins/updates/update-center.json 或https://mir ...

  7. ThinkPHP连接Oracle数据库的详细教程

    一. 操作环境搭建 系统:Windows7 旗舰版 64位PHP环境:wampserver2.2e-php5.4.3-httpd2.2.22-mysql5.5.24 32位版ThinkPHP:3.0正 ...

  8. Hash函数浅谈

    Hash函数是指把一个大范围映射到一个小范围.把大范围映射到一个小范围的目的往往是为了节省空间,使得数据容易保存. 除此以外,Hash函数往往应用于查找上.所以,在考虑使用Hash函数之前,需要明白它 ...

  9. 阿里云 OSS 如何设置防盗链, 上个月图床流量耗费50G+,请求次数10W+,什么鬼?

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  10. instr函数的用法

    1.定义 instr函数返回要截取的字符串在源字符串中的位置 语法如下:  instr( string1, string2 [, start_position [, nth_appearance ] ...