通过URL下载文件，解决图片和视频直接打开预览的情况

最新推荐文章于 2024-10-11 17:17:03 发布

勿语&

最新推荐文章于 2024-10-11 17:17:03 发布

阅读量80

点赞数 2

文章标签： chrome 前端 Blob

本文链接：https://blog.csdn.net/qq_58706693/article/details/142800153

版权

需要fetch传入的url拿到blob，再创建URL。如果不fetch，图片和视频就是直接在网页中打开，而不是弹出下载页面。

// 通过URL下载,如：http://127.0.0.1:9090/file/local-plus/6706bf89b47f230acb5ded93.mp4
    async function downloadFile(url) {
        const suffix = getFileSuffix(url)
        const fileName = Date.now() + '.' + suffix
        const res = await fetch(url)
        const blob = await res.blob()
        const tempUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = tempUrl;
        a.download = fileName;
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click();
        document.body.removeChild(a)
        URL.revokeObjectURL(tempUrl);
    }

    // 通过URL获取后缀名
    function getFileSuffix(url) {
        return url.substring(url.lastIndexOf('.') + 1);
    }