JS通用方法 : 基于文件类型自动选择下载方式 , 文档/图片

我开心就好o

已于 2024-12-02 09:28:32 修改

阅读量610

点赞数 9

分类专栏：昨天不是才上过班吗?怎么今天又要上班? 文章标签： java 前端 javascript 开发语言 typescript

于 2023-11-22 13:49:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39051175/article/details/134551600

版权

昨天不是才上过班吗?怎么今天又要上班? 专栏收录该内容

100 篇文章

订阅专栏

本文介绍了一个JavaScript函数loadFile，用于根据不同文件类型（如图片和文档）进行下载。它利用isImageByExtension检查文件扩展名，决定使用downloadFile还是downloadRes进行文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据文件类型进行下载, 文档/图片
直接调用loadFile方法即可 , 参数1是文件路径或者请求文件的URL (2者都可以) , 参数2是文件名
建议用于封装全局下载文件的函数

function loadFile(fileUrl, fileName) {
    if (isImageByExtension(fileUrl)) {
        try {
            downloadRes(fileUrl, fileName)
        } catch (error) {
            downloadFile(fileUrl, fileName)
        }
    } else {
        downloadRes(fileUrl, fileName)
    }
}
const downloadFile = (fileUrl, fileName) => {
    const link = document.createElement('a');
    link.href = fileUrl;
    link.download = fileName;
    link.target = '_blank';
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
const downloadRes = async (url, name) => {
    let response = await fetch(url)
    let blob = await response.blob()
    let objectUrl = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.href = objectUrl
    a.download = name
    a.click()
    a.remove()
}
function isImageByExtension(filename:string) {
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp'];
    const extension = filename.substring(filename.lastIndexOf('.')).toLowerCase();
    return imageExtensions.includes(extension);
}