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

    背景:

    excel 文件下载,后台返回的是二进制文件

    开始:

    api.workerDownload({
            ...this.queryString
          }).then(res => {
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel'
            })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '人员信息.xlsx')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            this.isDownloading = false
          }).catch(err => {
            this.isDownloading = false
          })
    

      遇到的问题

    开始在请求中没有添加responseType, 导致后台直接内容返回的二进制

    api.workerDownload({
            ...this.queryString
          }).then(res => {
            const blob = new Blob([res], {
              type: 'application/vnd.ms-excel'
            })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '人员信息.xlsx')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            this.isDownloading = false
          }).catch(err => {
            this.isDownloading = false
          })
    

      两个地方 就是对于res没有处理有区别 这样就是导致导出内容为[object, object]

      解决: 在请求中添加 responseType: 'blob' , 这样返回就是Blob形式的二进制内容,处理的时候需要的是二进制内容,所以取res.data 进行转换。

  • 相关阅读:
    xfce4-windowck-plugin的替代品
    git使用Beyond Compare作为diff和merge工具
    Visual Studio设置多个快捷键
    scrapy参数-COOKIES_ENABLED 最权威解释, 帮你避坑
    Linux基础使用
    python 所有的库整理
    Nginx配置详解
    15个常用的javaScript正则表达式
    Redis开发建议
    mysql 同步大量数据小技巧
  • 原文地址:https://www.cnblogs.com/tutao1995/p/13612575.html
Copyright © 2011-2022 走看看