JavaScript下載文件導(dǎo)出到本地的兩種實現(xiàn)方式

更新時間：2026年02月03日 09:47:13 作者：辰風(fēng)沐陽

本文介紹了JavaScript中文件下載的兩種實現(xiàn)方式,瀏覽器對文件處理取決于類型和服務(wù)器的響應(yīng)頭設(shè)置,zip/docx等文件會觸發(fā)下載,而圖片/視頻等會在瀏覽器中打開,文章提供了兩種下載方案,需要的朋友可以參考下

前言

JavaScript 點擊跳轉(zhuǎn)文件地址時，有的文件會直接下載，而有的文件則在瀏覽器中直接打開，這主要取決于瀏覽器對文件類型的處理方式和服務(wù)器的響應(yīng)頭設(shè)置

瀏覽器對文件類型的處理

需要下載的文件：zip、docx 等文件，通常會觸發(fā)下載
可在瀏覽器中打開的文件：圖片（png、jpg）、視頻（mp4）、文本文件（txt）等，瀏覽器會嘗試打開這些文件

跨域和安全策略

如果文件來自不同域名，瀏覽器的安全策略（CORS）可能會影響文件的處理方式
某些文件可能因為安全原因被瀏覽器阻止直接打開，從而觸發(fā)下載

a 標(biāo)簽的 download 屬性

通過動態(tài)創(chuàng)建一個 a 標(biāo)簽，并設(shè)置 href 和 dowload 屬性來觸發(fā)下載

適用于同源或支持 cors 的跨域文件下載，也可以下載一個 base64 格式的文件

function download(url, fileName) {
    const a = document.createElement("a")
    a.href = url
    a.download = fileName
    a.click()
}

使用示例：后端接口返回一個 base64 格式的二維碼圖片，前端按鈕需要實現(xiàn)點擊按鈕將圖片下載到本地的功能

download('data:image/png;base64,iVBORwxxxxx', 'qrcode.png')

將網(wǎng)絡(luò)地址文件下載到本地

從指定 URL 下載文件并觸發(fā)并觸發(fā)瀏覽器的下載行為，這種實現(xiàn)方式可以繞過瀏覽器的同源策略限制

檢測 url 地址，然后獲取文件名稱
使用 XMLHttpRequest 發(fā)起文件下載請求
onreadystatechange 下載狀態(tài)監(jiān)控，監(jiān)聽請求狀態(tài)變化
onload 處理下載完成后的邏輯，請求成功時創(chuàng)建一個 a 標(biāo)簽觸發(fā)瀏覽器的下載行為

// 下載文件并導(dǎo)出本地
function downloadFile(url, name = '') {
    // 檢測文件地址
    if (url.substr(0, 4) !== 'http') {
        throw new Error("請傳入一個網(wǎng)絡(luò)地址");
    }
    // 獲取文件名稱
    let fileName;
    if (name) {
        const index = url.lastIndexOf('.')
        fileName = name + (index === -1 ? url : url.substr(index))
    } else {
        const index = url.lastIndexOf('/')
        fileName = index === -1 ? url : url.substr(index + 1)
    }
    // 執(zhí)行文件下載
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
        if (xhr.status === 200) {
            const url = window.URL.createObjectURL(xhr.response)
            const a = document.createElement('a');
            a.href = url
            a.download = fileName
            a.click()
        } else {
            console.log('文件下載失敗');
        }
    }
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status == 200) {
                console.log('文件下載成功');
            }
        } else if (xhr.readyState === 3) {
            console.log('文件下載中');
        }
    }
    xhr.send();
}

使用示例：

// 下載文件（導(dǎo)出時默認(rèn)使用原文件名）
downloadFile('https://img.xxx.com/thumb/xxxx.png')
// 下載文件，并且指定文件名稱（不需要寫文件后綴名，會自動拼接）
downloadFile('https://img.xxx.com/thumb/xxxx.png', 'qrcode')

到此這篇關(guān)于JavaScript下載文件導(dǎo)出到本地的兩種實現(xiàn)方式的文章就介紹到這了,更多相關(guān)JavaScript下載文件導(dǎo)出到本地內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: