h5 uniapp实现文件流，链接的下载，或者打包成压缩文件

需要下载以下几个包
axios

npm i axios --save

JSZip（压缩）

npm install jszip --save

file-saver（导出文件）

npm install file-saver --save

直接写代码了，都有解释，欢迎留言讨论

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'

// 当下载的文件为文件流时，使用在h5小程序中，不使用uni接口
export function downFile(value) {
  // 需要接收流文件的接口
  // 这里的value是一个对象，主要包括url，params，和其他需要传递给后台的参数
  axios({
    ...value,
    method: 'get',
    responseType: 'blob',
  }).then((res) => {
    const fileUrl = new Blob([res.data]) // 将返回的数据流手动构建成blob流
    const reader = new FileReader()
    reader.readAsDataURL(fileUrl) //转换为64位，可以直接放入a标签
    reader.onload = (e) => {
      const a = document.createElement('a')
      if (typeof e.target.result === 'string') {
        a.download = 'test' + '.pdf' // 这里以接收pdf文件为例
        a.href = e.target.result
      }
      a.click()
      document.body.removeChild(a)
    }
  })
}

// 下载文件压缩包
export function downZip(value) {
  const zip = new JSZip() //创建一个压缩文件
  // 这里的value是一个对象，主要包括url，params，和其他需要传递给后台的参数
  axios({
    ...value,
    method: 'get',
    responseType: 'blob',
  })
    .then((res) => {
      zip.file('test.pdf', res.data, { binary: true }) // 将文件打包到文件夹中，如果此处有多个文件，可以使用for循环将文件都加载在文件夹中，这里以pdf文件为例
    })
    .then(() => {
      zip.generateAsync({ type: 'blob' }).then((content) => {
        //打包到文件中压缩
        FileSaver.saveAs(content, '签到表.zip') // 利用file-saver保存文件  自定义文件名
      })
    })
}