常用下载功能实现
下载功能多次使用,并且不同场景需要的效果不同,这边就列举几个自己常用的
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 // 必须是文件路径才能
行百里者半九十