前端下载文件的几种方案

梳理一下前端下载文件的几种方案。

---

方案一：a标签下载

创建a标签，手动触发点击事件下载。

创建的a标签形如：<a href="file_url" download="file_name">file_title</a>。

download 属性只在同源下生效。

ts

/**
 * a标签下载
 * @param file 来自接口返回的blob或者文件路径
 * @param fileName 文件名
 * @returns
 */
export function downloadFile(file: Blob | string, fileName: string) {
    const url = (file instanceof Blob) ? window.URL.createObjectURL(new Blob([file])) : file
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = url
    a.download = fileName
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)
}

方案二：window.open

window.open 可以直接调用浏览器的下载。

方案三：使用插件

可以使用js-file-downloader：https://www.npmjs.com/package/js-file-downloader

import JsFileDownloader from 'js-file-downloader';

const fileUrl = 'http://...';

new JsFileDownloader({
    url: fileUrl
})
.then(function () {
    // 下载完毕回调函数
})
.catch(function (err) {
    //
});