常用下载功能实现

下载功能多次使用,并且不同场景需要的效果不同,这边就列举几个自己常用的

a标签实现下载

const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = 'name'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

注意,上面这个的话需要你的url地址就是下载地址,如果你的地址是一个视频地址,那么就会播放该视频
如果您想下载该视频,可以使用下面的方法

fetch(url) // 首先调用接口,获取视频数据
.then(res => res.blob()) // 将数据转换成blob格式
.then(blob => {
  const a = document.createElement('a')
  const objUrl = window.URL.createObjectURL(blob) // 生成一个DOMString,包含一个对象URL,该URL可用于指定源的内容
  a.href = objUrl
  a.download = 'name'
  a.style.display = 'none'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
})

fs写入文件

有时候遇到,后端接口调用不是直接的下载一个文件,而是一堆数据,这个时候需要我们直接创建文件然后将数据塞到文件中(在前端框架中是不能直接调用node的,所以我这里还用了electron的框架)

const function = async () => {
  const res = await apiGet(url) // 假设是获取数据的接口,然后res就是我们获取到的数据
  electron?.Upload({file: res.file})
}

ipcMain.handle('upload', (e, params) => {
  const path = '需要写入的地址'
  const name = '文件保存名字'
  const fileStream = fs.createWriteStream(`${path}/${name}`) // 打开写入文件
  return new Promise((resolve, reject) => {
    fileStream.write(params.file) // 写入文件
    fileStream.on('error', () => {
      resolve(false)
    })
    resolve(true)
  })
})

window.open

window.open(filePath) // 必须是文件路径才能

location.href

window.location.href = url // 必须是文件路径才能
posted @ 2023-04-25 18:49  卿六  阅读(35)  评论(0编辑  收藏  举报