H5 移动端文件下载的方法

最新推荐文章于 2025-04-25 17:48:48 发布

菜鸟驿站2020

最新推荐文章于 2025-04-25 17:48:48 发布

阅读量7.5k

点赞数 1

分类专栏： uni-app 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38946164/article/details/120348812

版权

uni-app 专栏收录该内容

59 篇文章

订阅专栏

a 标签下载

// a标签下载文件，可跨域下载
    function aDownlad(url, fileName) {
        const link = document.createElement('a')
        link.href = url
        link.target = '_blank'
        link.download = fileName
        link.style.display = 'none'
        document.body.append(link)
        link.click()
    }

blob下载文件

// 通过blob下载文件
    function downloadByBlob(blob, fileName) {
        if (window.navigator.msSaveBlob) {//ie下载
            window.navigator.msSaveBlob(blob, fileName)
        } else {
            const URL = window.URL || window.webkitURL
            const url = URL.createObjectURL(blob)
            aDownlad(url, fileName)
        }
    }

XMLHttpRequest下载文件

跨域情况下，该方法失效

// 通过XMLHttpRequest下载文件
    function downloadFileByUrl(url, fileName) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                // 获取blob数据并保存
                downloadByBlob(xhr.response, fileName);
            }
        };
        xhr.send();
    }