vue项目,利用axios 请求下载文件(arraybuffer)接口

// vue mtods

	import { handleDownloadFile } from '@/utils/index'

	async exportConfig() {
      try {
        const res = await axios({
          method: 'get',
          url: `/v1/rest/app/config/downloadConfigFile?productId=${this.productId}`,
          responseType: 'arraybuffer',
        })
        handleDownloadFile(this, res)
      } catch {
        this.$message.error('系统错误')
      }
    },

// index.js

// 统一处理下载arraybuffer文件接口数据
export function handleDownloadFile(obj, res) {
  const fileData = res.data
  if (Object.prototype.toString.call(fileData) === '[object ArrayBuffer]') {
    try {
      const enc = new TextDecoder('utf-8')
      const transformFileData = JSON.parse(enc.decode(new Uint8Array(fileData)))
      const { code, message = '系统错误' } = transformFileData
      if (code !== 0) obj.$message.error(message)
      else obj.$message.success(message)
    } catch {
      const blob = new Blob([fileData])
      const downloadUrl = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = downloadUrl
      link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1])
      document.body.appendChild(link)
      link.click()
      link.remove()
      obj.$message.success('下载成功')
    }
  }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐