Skip to content

[Bug] 线上构建打包自己的html应用后,使用应用内下载功能会重复下载zip文件 #1070

@shiyu-jiang

Description

@shiyu-jiang

Search before asking

  • 我在 issues 列表中搜索,没有找到类似的内容。
    I searched in the issues and found nothing similar.

Pake version

使用线上构建打包。打包对象是存放于oss上的html和js文件。也有远端请求的js库

System version

chrome浏览器 142.0.7444.60(正式版本),始终跟随更新

Node.js version

Minimal reproduce step

使用线上构建打包。打包对象是存放于oss上的html和js文件。也有远端请求的js库
选择应用版本为windows。
指向目标为我存放于oss上的html和js文件

What did you expect to see?

点击下载后,只下载一条zip,而不是瞬间下载两条。

What did you see instead?

我的页面实现的功能是处理一批word,并打包为zip后导出到下载文件夹。但是每次下载后我总能看到两个时间戳完全一致的zip文件。他们的命名是【名称】.zip和【名称-1】.zip.但是在浏览器中运行我的html则没有此问题。

由于我不会技术,我的代码都是AI编写,我反复用不同模型检查了代码。在尝试调整代码从FileSaver.js下载,变成原生下载后,在pake打包的应用中甚至无法下载zip了。所以最后定位可能是打包工具内部的逻辑问题。
以下是我下载部分的代码:
`
// 停止导出
function stopExport() {
shouldStopExport = true;
isExporting = false;
exportModal.classList.remove('show');
exportBtn.disabled = false;
}

    // 下载文件(修复重复下载问题)
    function downloadFile(blob, fileName) {
        // 防抖:如果短时间内重复调用,直接返回
        if (window._lastDownloadTime && Date.now() - window._lastDownloadTime < 3000) {
            console.log('防抖:跳过重复下载请求');
            showDownloadStatus('下载正在进行中,请勿重复操作', 'error');
            return;
        }
        
        // 状态锁:如果正在下载,直接返回
        if (isDownloading) {
            console.log('状态锁:下载正在进行中,跳过重复请求');
            showDownloadStatus('下载正在进行中,请稍候', 'error');
            return;
        }
        
        // 设置下载状态
        isDownloading = true;
        window._lastDownloadTime = Date.now();
        showDownloadStatus('正在准备下载...', 'success');
        
        // 清除之前的超时
        if (downloadTimeout) {
            clearTimeout(downloadTimeout);
        }
        
        try {
            // 优先使用 FileSaver.js
            if (typeof saveAs !== 'undefined') {
                saveAs(blob, fileName);
                console.log('使用FileSaver.js下载文件:', fileName);
            } else {
                // 备用方案:使用原生方法
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = fileName;
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 延迟释放URL,确保下载完成
                setTimeout(() => {
                    URL.revokeObjectURL(url);
                    console.log('使用原生方法下载文件:', fileName);
                }, 100);
            }
            
            // 显示下载成功状态
            showDownloadStatus(`下载成功: ${fileName}`, 'success');
            
        } catch (error) {
            console.error('下载失败:', error);
            showDownloadStatus('下载失败,请重试', 'error');
        }
        
        // 设置超时,3秒后重置下载状态
        downloadTimeout = setTimeout(() => {
            isDownloading = false;
            // 5秒后隐藏状态消息
            setTimeout(() => {
                downloadStatus.style.display = 'none';
            }, 5000);
        }, 3000);
    }

    // 显示下载状态
    function showDownloadStatus(message, type) {
        downloadStatus.textContent = message;
        downloadStatus.className = 'download-status ' + type;
        downloadStatus.style.display = 'block';
    }`

Anything else?

No response

Are you willing to submit a PR?

  • I'm willing to submit a PR!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions