zoukankan      html  css  js  c++  java
  • vue + axios 文件下载

    实现文件下载功能时,后台返回的为文件流时,需要通过 blob 处理文件流

    首先设置 responseType 对象格式为 blob ,阻止乱码问题

    获取请求返回的 response 对象中的二进制文件流转为 blob 对象

    创建一个临时的 url 指向 blob 对象

    最后释放这个临时的 url 对象

    实现的过程,涉及到了 ie 的兼容问题,ie 浏览器不支持 a 标签属性

    细节代码如下:

    
    
          axios({
            url: this.downloadPath + i.id,
            method: 'get',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            responseType: 'blob'
          }).then(res => {
            let blob = new Blob([res.data], { type: 'application/octet-stream' })
            let href = window.URL.createObjectURL(blob)
            // 兼容 ie
            if (window.navigator.msSaveBlob) {
              window.navigator.msSaveBlob(blob, i.name)
            } else {
              const link = document.createElement('a')
              link.style.display = 'none'
              link.href = href
              link.download = res.headers['filename']
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              window.URL.revokeObjectURL(link)
            }
          })
    
    
  • 相关阅读:
    使用linux将一个服务器上的文件或者文件夹复制黏贴到另一个服务器上
    深度学习之常用linux命令总结
    python 操作MYSQL数据库
    MYSQL登录及常用命令
    mysql数据库可视化工具—Navicat Premium—安装与激活
    Mysql数据库的简单介绍与入门
    java 正则匹配int型
    js设置文本框只能输入数字
    Java数据抓取(一)
    Nodejs的多线程
  • 原文地址:https://www.cnblogs.com/sxxya/p/12156160.html
Copyright © 2011-2022 走看看