前端文件下载时文件名自定义的完美解决方案

<button onclick="window.location.href='/files/2023/09/abc123.docx'">下载文件</button>

<a href="/files/2023/09/abc123.docx" rel="external nofollow"  download="项目计划书_v2.0.docx">下载文件</a>

<button onclick="downloadFile('/files/2023/09/abc123.docx', fileNewName)" 
        class="layui-btn layui-btn-normal">点击下载</button>

<script>
    var fileNewName = '项目计划书_v2.0'; // 自定义文件名，可不包含扩展名
    
    // 下载函数，使用blob方式确保下载
    function downloadFile(url, fileName) {
        // 如果未指定文件名，从URL中提取原文件名
        if (!fileName) {
            // 从URL中解析文件名
            const urlParts = url.split('/');
            fileName = urlParts[urlParts.length - 1].split('?')[0];
            
            // 处理可能的URL编码
            fileName = decodeURIComponent(fileName);
        }
        
        // 添加文件扩展名（如果原URL有且新文件名没有）
        const originalExt = url.split('.').pop()?.split('?')[0];
        const newExt = fileName.split('.').pop();
        if (originalExt && originalExt !== newExt) {
            fileName += '.' + originalExt;
        }
        
        // 发送请求获取文件blob
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('文件下载失败');
                }
                return response.blob();
            })
            .then(blob => {
                // 创建下载链接
                const a = document.createElement('a');
                const url = URL.createObjectURL(blob);
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                
                // 清理资源
                setTimeout(() => {
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 0);
            })
            .catch(error => {
                layer.msg(error.message, {icon: 5});
                console.error('下载错误:', error);
            });
    }
</script>