前端处理后台传过来的二进制流进行下载，并处理乱码

white-hang

于 2021-12-27 14:48:13 发布

467

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_46063693/article/details/122171965

版权

话不多说，直接上代码

import axios from 'axios'
import { message } from 'ant-design-vue'//设置下载完成后message提示
import { getToken } from '@/views/user-defined/util/index'//这是你自己项目里的token
//下载函数
const downLoad = (url, data, method) => {
  const axiosObj = {
    method: (method ? method : 'get'),
    url: url,
    responseType: 'blob',
    headers: { Authorization: getToken() }
  }
  if (axiosObj.method == 'get' || axiosObj.method == 'GET') {
    axiosObj['params'] = data
  } else {
    axiosObj['data'] = data
  }
  axios(axiosObj)
    .then(data => {
      if (!data) {
        message.error({
          content: '数据导出失败',
          duration: 2, // 提示时常单位为s
          top: '40px', // 距离顶部的位置
          maxCount: 3 // 最多显示提示信息条数(后面的会替换前面的提示)
        })
        return
      }
      console.log(data, 'data')
      const blob = new Blob([data.data])
      console.log(blob, 'blob')
      var reader = new FileReader()
      reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
      reader.onload = function(e) {
        // 转换完成，创建一个a标签用于下载
        var a = document.createElement('a')
          try {
            var newString = data.headers['content-disposition']
              .split(';')[1]
              .split('=')[1] //文件名字截取，可以根据后台反参写
          } catch {
            message.error({
              content: '数据导出失败',
              duration: 2, // 提示时常单位为s
              top: '40px', // 距离顶部的位置
              maxCount: 3 // 最多显示提示信息条数(后面的会替换前面的提示)
            })
            return
          }
        let fileName = decodeURI(escape(newString)) // 如果导出的文件名乱码，这是处理文件名乱码问题,记住如果不乱码，可以不用
        console.log('文件名：', fileName)
        a.download = fileName
        a.href = e.target.result
        document.body.appendChild(a) // 修复firefox中无法触发click
        a.click()
        document.body.removeChild(a)
      }
    })
    .catch(() => {
      message.error({
        content: '数据导出失败',
        duration: 2, // 提示时常单位为s
        top: '40px', // 距离顶部的位置
        maxCount: 3 // 最多显示提示信息条数(后面的会替换前面的提示)
      })
    })
}
export default downLoad