文件下载先弹另存为弹窗再进行下载问题

Question

问题遇到的现象和发生背景

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);
                            }

我想要达到的结果

点击下载按钮，弹出另存为的弹窗，点确定后再进行下载分段下载，处理数据，合并分段完成后结束下载

Answer 1

获取你可以试试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)
    }
})
})