前端 vue3.2+ts 中实现文件下载的三种方式，即文件流、url，以及 JSZip 压缩包方式

1. 后端返回文件 url 时

const link = document.createElement('a') // 创建一个 a 标签用来模拟点击事件	
link.style.display = 'none'
link.href = '文件url'
link.setAttribute('download', '文件名')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

2. 后台返回文件流时，用 blob 对象下载文件

// res 是返回的文件流，type 是文件MIME类型, fileName 是给下载的文件一个名称
const blobDownloadFile = (res: any, type: string, fileName: string) => {
  const blob = new Blob([res], {
    type: type
  })
  const a = document.createElement('a')
  const URL = window.URL || window.webkitURL
  const herf = URL.createObjectURL(blob)
  a.href = herf
  a.download = fileName
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  window.URL.revokeObjectURL(herf)
}
blobDownloadFile(url, 'text/plain', '测试')

前端利用Blob对象创建指定文件并下载

3. JSZip 库以压缩包下载文件

首先可点击看看 JSZip库的简单使用
在项目组件中

import { onMounted } from 'vue'
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

let dowloadZip: JSZip
const urlToPromise = (url: string) =>
  new Promise((resolve, reject) => {
    JSZipUtils.getBinaryContent(url, (err: any, data: unknown) => {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })

// 添加文件
dowloadZip.file(item.fileName, urlToPromise(item.fileUrl), { binary: true })

// .generateAsync() 生成一个 zip 文件
dowloadZip
  .generateAsync({ type: 'blob' })
  .then(
    (blob) => {
      // saveAs(blob, "测试.zip"); 直接在浏览器打成 测试.zip 包并下载
      saveAs(blob, '测试.zip')
    },
    (e) => {
      console.log(e)
    }
  )

// 在 DOM 挂载之后创建 JSZip 实例
onMounted(() => {
  dowloadZip = new JSZip()
})