vue从接口下载各类文件、压缩包

<el-button type="primary" size="small" @click="download(fileName)">下载</el-button>

fileName为自定义的文件名，比如 “测试文件.pdf”

    //文件清单表格——文件下载
    download(fileName) {
      const param = {
        fileName: fileName,
      }
      fileDownload(param)
        .then((response) => {
          this.$Confirm.handleAlert('文件下载成功', 'success')
        })
        .catch((error) => {
          this.$Confirm.handleAlert('文件下载失败', 'error')
        })
    },

import { fileDownload } from '@/api/policy'

//获取文件下载
export const fileDownload = (data) => {
  return download('http://172.16.38.xxx:8080/static/mock/pdf.txt', data)
} // 我在这里用Mock数据模拟接口请求,pdf.txt保存的是二进制流

export function download(url, data) {
  return request({
    url: url,
    data: data,
    headers: {
      'Content-Type': 'application/json; application/octet-stream',
    },
    responseType: 'blob',
    method: 'get',
  })
    .then((response) => {
      console.log(response)
      const blob = new Blob([response.data], { type: 'application/zip' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a') // 创建a标签
      link.href = url
      link.download = data.fileName // 设置下载的文件名
      document.body.appendChild(link)
      link.click() //执行下载
      document.body.removeChild(link) //释放标签
    })
    .catch((error) => {
      console.log(error)
    })
}