前言
今天，我寫了 《Nodejs 實現 Mysql 數據庫的全量備份的代碼演示》 和 《NodeJS 基于 Koa, 開發一個讀取文件，并返回給客戶端文件下載》 兩篇文章。在這兩篇文章中，我實現了數據庫的備份，和提供數據庫下載等接口。
但是，在我們給接口加上鑒權以后，直接通過 window.open 或者 axios 的默認配置訪問接口，是不能下載的。
因為，我們的下載接口，是需要用戶鑒權的，所以排除了 window.open 方法。而我們一般配置的 axios 是用來處理接口的 JSON 數據的。所以，這也不支持文件的下載。
怎么辦呢？其實，通過一點點的配置，就可以實現了。
AXIOS 后處理實現
原理也很簡單，我們在接口請求的時候，指定返回的是 blob 對象，然后在后處理里，根據這個配置參數判斷，直接將服務端返回的數據 return 出去即可。
// 創建 axios
const service = axios.create({baseURL: '/api/v1', // url = base url + request urltimeout: 50000 // request timeout
})
// 前處理這里不展示
// service.interceptors.request.use...
service.interceptors.response.use((response) => {// 如果是文件下載，直接返回 responseif (response.config.responseType === 'blob') {return Promise.resolve(response)}// 其他正常邏輯，我們這里不展示了，每個人的習慣和代碼也都不一樣·}
)
調用接口實現文件加載
在調用接口的地方，我們指定返回數據類型為 blob 對象，然后用 js 創建一個臨時下載鏈接，從而實現在瀏覽器中下載文件即可。
request({url: `${ApiName}/${fileName}`,method: 'get',// 指定返回 blob 對象responseType: 'blob'
}).then((response) => {// 獲取文件名const disposition = response.headers['content-disposition']let fileName = 'download'if (disposition) {fileName = disposition.split('filename=')[1]}// 創建下載鏈接const blob = new Blob([response.data])const link = document.createElement('a')link.href = window.URL.createObjectURL(blob)link.download = fileNamelink.click()window.URL.revokeObjectURL(link.href)
})
小結
因為備份數據庫文件的下載是需要鑒權的，所以不能直接下載。通過接口請求的方式實現下載的核心代碼就是上面這些了。
可能現在大多數人都直接使用 fetch 來請求接口了吧，如果是這樣的話，這篇文章對你可能就沒什么幫助了。我回頭有空可以補充一篇。
各位看官，如果本文對你有所幫助，麻煩用您發財的小手點個贊吧！謝謝！
