js实现文件下载功能

在项目中，可能会遇到js下载文件、图片等一些资源，所以在这里记录下实现方式。

实现方式：

1. 获取需要下载的文件File对象

2. 通过File对象得到Blod对象

3. 通过创建a标签并触发a标签的点击事件实现下载

4. 释放资源已经删除a标签

直接上代码：

这里我封装一个方法传入特定参数就直接能实现下载功能

/**
 * 处理实现文件下载功能
 * @param {File}  file File 文件
 * @param {string} fileName 下载的文件名称包含后缀（比如：hello.png）
 * */
const handleUploadFile = (file, fileName) => {
    // 创建blob对象
    const blob = new Blob([file]);

    // 创建a标签，通过a标签实现下载
    const dom = document.createElement("a");
    dom.download = fileName;
    dom.href = URL.createObjectURL(blob);
    dom.id = "upload-file-dom";
    dom.style.display = "none";
    document.body.appendChild(dom);

    // 触发点击事件
    dom.click();

    // 释放资源
    URL.revokeObjectURL(dom.href);
    document.getElementById("upload-file-dom")?.remove();
}

最后调用此方法就能实现下载效果啦😆