一般的下載,也就a標籤加個鏈接地址,標籤內加個download屬性. 當地址是後端提供時:可通過創建a標籤, 隨即給a便籤附下載鏈接,文件名和屬性, 最後再創建點擊效果,最後清楚生成的a標籤. 再則是圖片地址提供:可以通過Base64加canvas,對圖片的下載可以進行處理. 下面就是相關方法處理函數 HTML與文件下載
HTML與文件下載
<a href="large.jpg" download>下載</a>
文件下載配合後端表格導出
export function downloadFile(url, filename) {
// 創建隱藏的可下載鏈接
let link = document.createElement('a');
link.href = url;
link.download = filename;
link.target = '_blank';
link.style.display = 'none';
document.body.appendChild(link);
// 觸發點擊
link.click();
// 然後移除
document.body.removeChild(link);
link = null;
}
加參數:
export function generateQS(baseurl, paramObj) {
let returnUrl = baseurl + '?'
for (const key in paramObj) {
// Object.hasOwnProperty(prop)用來判斷對象是否含有指定屬性
// 返回值boolean
if (paramObj.hasOwnProperty(key)) {
const element = paramObj[key];
returnUrl += key + '=' + element + '&';
}
}
return returnUrl;
}
藉助HTML5 Blob實現文本信息文件下載
const funDownload = function (content, filename) {
// 創建隱藏的可下載鏈接
let eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符內容轉變成blob地址
let blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 觸發點擊
document.body.appendChild(eleLink);
eleLink.click();
// 然後移除
document.body.removeChild(eleLink);
};
藉助Base64實現任意文件下載
let funDownload = function (domImg, filename) {
// 創建隱藏的可下載鏈接
let eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 圖片轉base64地址
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let width = domImg.naturalWidth;
let height = domImg.naturalHeight;
context.drawImage(domImg, 0, 0);
// 如果是PNG圖片,則canvas.toDataURL('image/png')
eleLink.href = canvas.toDataURL('image/jpeg');
// 觸發點擊
document.body.appendChild(eleLink);
eleLink.click();
// 然後移除
document.body.removeChild(eleLink);
};
結束語
在Chrome瀏覽器下,模擬點擊創建的a元素即使不append到頁面中,也是可以觸發下載的,但是在Firefox瀏覽器中卻不行,因此,上面的funDownload()方法有一個appendChild和removeChild的處理,就是爲了兼容Firefox瀏覽器。