vue+electron+axios,大文件下载,点击下载按钮,弹出另存为的弹窗,点确定后再进行下载分段下载,处理数据,合并分段完成后结束下载。
但是现在网上搜的全部是下载完成以后再用a标签弹出另存为框。
这是都已经下载完成并且处理好数据后,然后才弹出另存为框
if ("download" in document.createElement("a")) {
//支持a标签download的浏览器
const link = document.createElement("a"); //创建a标签
link.download = fileName; //a标签添加属性
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click(); //执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link); //释放标签
} else {
//其他浏览器
navigator.msSaveBlob(blob, fileName);
}
点击下载按钮,弹出另存为的弹窗,点确定后再进行下载分段下载,处理数据,合并分段完成后结束下载
获取你可以试试electron框架中的下载事件
ipcMain.on('download', (event, downloadpath, savepath) => {
// 下面这句会触发will-download事件
global.savepath = savepath || ''
mainWindow.webContents.downloadURL(downloadpath)
})
/** *****************文件下载代码************************** */
mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
// 设置文件存放位置,如果用户没有设置保存路径,Electron将使用默认方式来确定保存路径(通常会提示保存对话框)
if (global.savepath) {
item.setSavePath(global.savepath + item.getFilename())
}
// 记录上一次下载的字节数据
let prevReceivedBytes = 0
item.on('updated', (event, state) => {
if (state === 'interrupted') {
console.log('Download is interrupted but can be resumed')
} else if (state === 'progressing') {
let receivedBytes = item.getReceivedBytes()
if (item.isPaused()) {
console.log('Download is paused')
} else {
console.log(`Received bytes: ${receivedBytes}`)
}
// 进度百分比(接收字节数和总字节数求一个比例)
if (receivedBytes && item.getTotalBytes()) {
let value = parseInt(
100 * (
receivedBytes / item.getTotalBytes()
)
)
// 计算每秒下载的速度
let downloadSpeed = receivedBytes - prevReceivedBytes
prevReceivedBytes = receivedBytes
mainWindow.webContents.send('updateProgressing', value, downloadSpeed)
}
}
})
item.once('done', (event, state) => {
if (state === 'completed') {
console.log('Download successfully')
// 回显 调用渲染进程方法
mainWindow.webContents.send('downstate', state)
} else {
console.log(`Download failed: ${state}`)
// 回显 调用渲染进程方法
mainWindow.webContents.send('downstate', state)
}
})
})
大佬,我请教个问题 我就是用得上面的方法,但是下载完成 没有弹出另存为弹窗。我的需求是 下载前弹出 选择保存路径的弹窗,就像浏览器的下载弹窗一样。我是菜鸡 求大佬解答下