快捷導(dǎo)航

前端文件下載時(shí)文件名自定義的完美解決方案

更新時(shí)間：2025年09月15日 10:55:51 作者：lskblog

在Web開發(fā)中,前端下載文件是一個(gè)常見的需求,下面這篇文章主要介紹了前端文件下載時(shí)文件名自定義的完美解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在Web開發(fā)中，文件下載功能看似簡單，實(shí)則暗藏玄機(jī)。特別是當(dāng)我們需要自定義下載文件名時(shí)，經(jīng)常會(huì)遇到各種兼容性問題。本文將分享一個(gè)經(jīng)過實(shí)踐檢驗(yàn)的完美解決方案，幫助你輕松實(shí)現(xiàn)自定義文件名的文件下載功能。

問題背景

在開發(fā)管理系統(tǒng)時(shí)，我們經(jīng)常需要提供文件下載功能。默認(rèn)情況下，瀏覽器會(huì)使用URL中的文件名作為下載文件的名稱，但這往往不符合我們的業(yè)務(wù)需求。例如：

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

這種方式下載的文件會(huì)被命名為abc123.docx，但我們可能希望它顯示為有意義的名稱，如項(xiàng)目計(jì)劃書_v2.0.docx。

常見解決方案的局限性

很多開發(fā)者會(huì)嘗試使用<a>標(biāo)簽的download屬性：

<a href="/files/2023/09/abc123.docx" rel="external nofollow"  download="項(xiàng)目計(jì)劃書_v2.0.docx">下載文件</a>

但這種方法存在明顯局限性：

對于跨域資源，download屬性可能失效
不同瀏覽器對該屬性的支持程度不一
無法處理動(dòng)態(tài)生成的文件名
某些文件類型（如.docx）可能會(huì)被瀏覽器直接打開而非下載

完美解決方案

下面是一個(gè)兼容各種場景的文件下載方案，它使用Blob對象來確保文件被正確下載并應(yīng)用自定義文件名：

<button onclick="downloadFile('/files/2023/09/abc123.docx', fileNewName)" 
        class="layui-btn layui-btn-normal">點(diǎn)擊下載</button>

<script>
    var fileNewName = '項(xiàng)目計(jì)劃書_v2.0'; // 自定義文件名，可不包含擴(kuò)展名
    
    // 下載函數(shù)，使用blob方式確保下載
    function downloadFile(url, fileName) {
        // 如果未指定文件名，從URL中提取原文件名
        if (!fileName) {
            // 從URL中解析文件名
            const urlParts = url.split('/');
            fileName = urlParts[urlParts.length - 1].split('?')[0];
            
            // 處理可能的URL編碼
            fileName = decodeURIComponent(fileName);
        }
        
        // 添加文件擴(kuò)展名（如果原URL有且新文件名沒有）
        const originalExt = url.split('.').pop()?.split('?')[0];
        const newExt = fileName.split('.').pop();
        if (originalExt && originalExt !== newExt) {
            fileName += '.' + originalExt;
        }
        
        // 發(fā)送請求獲取文件blob
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('文件下載失敗');
                }
                return response.blob();
            })
            .then(blob => {
                // 創(chuàng)建下載鏈接
                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('下載錯(cuò)誤:', error);
            });
    }
</script>