需要下载以下几个包
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保存文件  自定义文件名
      })
    })
}
Logo

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

更多推荐