比如我們的用戶在之前上傳了各種類型的文件到我們的服務器上。然後在通過留存在數據庫的服務器url我們就可以訪問那個資源。
注意點：
a標籤的href屬性指向鏈接的目標可以是各種類型的文件。如果是瀏覽器能夠識別的類型，會直接在瀏覽器上顯示；如果是瀏覽器不能識別的類型，會彈出“文件下載”對話框，允許用戶下載到本地。
比如jpg，html這些都是瀏覽器能夠識別的就會直接展示，如果是docx一類的或者其他不能識別的類型那麼就會彈出對話框確認下載。
那麼針對瀏覽器支持的類型我們如何下載呢？
我們可以給a標籤加一個download屬性。這樣就可以全部實現下載了。
備註：a標籤download的瀏覽器支持情況：
關於IE的下載實現方式麻煩自行百度。筆者沒有下載IE瀏覽器
根據上述內容我們的代碼可以這麼寫：
中間筆者加了一些其他的事項，你也可以像筆者一樣加在其中其他的處理方式。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSDN吳小迪</title>
</head>
<body>
<button
onclick="oneClickToDownload()"
>一鍵下載
</button>
<a
target="_blank"
rel="noopener noreferrer"
hidden
id="downloadAEle"
>
隱藏的下載a標籤
</a>
<script>
const downloadAEle = document.getElementById('downloadAEle');
async function oneClickToDownload() {
// 可以在這裏設置loading防止用戶反覆點擊
// 後端進行壓縮操作 這個getTheZipUrl是一個請求，是後端同事給你的哦
const res = await getTheZipUrl({
objectId: entityId,
objectType: entityName,
});
if (res.errors) {
// 針對壓縮失敗進行一些錯誤處理
if (res.errors === '{errcode:-1}') {
alert('壓縮未成功或沒有附件可壓縮，請檢查後重試');
} else {
alert(JSON.stringify(res.errors))
}
} else {
const name = `附件-${moment(+new Date()).format('YYYY-MM-DD:hh:mm')}.zip`;
// 設置隱藏的a標籤的href地址
downloadAEle.current.href = `${appBaseUrl}file?url=${encodeURI(
res.data
)}&fileName=${name}`;
// 觸發點擊進行下載
downloadAEle.current.click();
}
// 取消loading
};
</script>
</body>
</html>