前端文件下載方式
引言
在前端開發中，文件下載是一個常見的需求。后端可能以不同的方式返回文件數據，前端需要根據不同的返回類型采用相應的處理方式。本文將總結幾種常見的后端返回類型及對應的前端處理方案，主要基于Vue3和JavaScript環境。
一、后端返回文件URL
場景描述
后端直接返回文件的訪問URL，通常是靜態文件或已存儲在服務器上的文件。
前端處理方式
// 直接使用window.open或創建a標簽下載
function downloadByUrl(url, filename) {const a = document.createElement('a')a.href = urla.download = filename || url.split('/').pop(); // 設置下載文件名a.style.display = 'none';document.body.appendChild(a)a.click()document.body.removeChild(a)// 或者簡單方式 在新標簽頁打開// window.open(url, '_blank')
}
Vue3中使用示例
import { ref } from 'vue'const fileUrl = getApiURL()//獲取接口返回的下載鏈接const handleDownload = () => {downloadByUrl(fileUrl.value, 'myfile.pdf')
}
注意事項
- 適用于公開可訪問的文件
- 可能需要處理跨域問題
- 對于大文件更高效，因為瀏覽器可以管理下載過程
二、后端返回二進制流（Blob）
場景描述
后端接口返回二進制流數據，通常設置responseType: 'blob'。
控制臺響應中返回的是file類型
前端處理方式
需要現在接口請求的地方，設置響應類型
import axios from 'axios'async function downloadByBlob(apiUrl, filename) {try {//請求接口地址const response = downloadTemp(apiUrl);const blob = new Blob([response.data])const downloadUrl = window.URL.createObjectURL(blob)const a = document.createElement('a')a.href = downloadUrla.download = filename || 'download'document.body.appendChild(a)a.click()// 清理window.URL.revokeObjectURL(a.href)document.body.removeChild(a)} catch (error) {console.error('下載失敗:', error)}
}// Vue3中使用示例
const handleBlobDownload = async () => {await downloadByBlob('/api/download', 'document.pdf')
}
請求接口的時候 也可以在請求的時候設置響應類型
const response = downloadTemp(apiUrl, {responseType: 'blob' // 關鍵設置
})
這里要看接口返回的有沒有data 如果是一整個res都是file 這里直接寫res
const blob = new Blob([response]);
const blob = new Blob([response.data])
注意事項
- 需要正確設置
responseType: 'blob' - 及時釋放創建的URL對象，避免內存泄漏
- 可以處理需要認證的私有文件
三、后端返回Base64字符串
場景描述
后端返回Base64編碼的文件數據，通常以字符串形式返回。
前端處理方式
function downloadByBase64(base64Data, filename, mimeType) {// 去除可能的Base64前綴const base64WithoutPrefix = base64Data.replace(/^data:.+;base64,/, '')// 轉換為字節數組const byteCharacters = atob
