69.前端如何实现文件下载

[wqjiao]

• 在线图片/文件下载

类似接口请求方式下载文件：

/**
 * 使用 fetch/ajax 下载在线图片/文件
 * @param {*} url 文件地址 
 * @param {*} filename 文件名称
 */
function download(url, filename) {
    return fetch(url).then(res => res.blob().then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }))
}

• a标签下载

下载 base64、文件流等

/**
 * @param {*} fileBlob 文件流
 * @param {*} filename 文件名称
 * @description 导出下载订单
 */
function exportDownload(fileBlob, filename) {
    let elink = document.createElement('a');

    elink.download = filename;
    elink.href = fileBlob;
    elink.click();
}