jquery接收 blob 数据

最新推荐文章于 2025-04-01 11:08:03 发布

last_long

最新推荐文章于 2025-04-01 11:08:03 发布

阅读量3.4k

点赞数 1

文章标签： jquery javascript

本文链接：https://blog.csdn.net/m0_37687058/article/details/124177135

版权

默认jQuery的ajax不支持dataType设置为blob，可通过原生ajax或修改xhrFields解决。方法1采用原生ajax，方法2是修改jQuery的ajax配置，设定xhrFields的responseType为blob。

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

默认 jq 的 ajax 对象中的 dataType 无法设置返回资源为 blob

dataType只能设置以下选项，不能设置blob，所以我们需要自己进行改动
在这里插入图片描述

解决方法1：使用原生的ajax

<div onclick="download1()">下载</div>
<script>
    function downloadFile1(content, filename) {
        var a = document.createElement('a')
        var blob = new Blob([content])
        var url = window.URL.createObjectURL(blob)
        a.href = url
        a.download = filename
        a.click()
        window.URL.revokeObjectURL(url)
    }

    function download1() {
        var url = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=20550366,3650143321&fm=26&gp=0.jpg' // demo图片
        ajax(url, function(xhr) {
            var filename = 'xxx.' + url.replace(/(.*\.)/, '') // 自定义文件名+后缀
            downloadFile1(xhr.response, filename)
        }, {
            responseType: 'blob'
        })
    }

    function ajax(url, callback, options) {
        window.URL = window.URL || window.webkitURL
        var xhr = new XMLHttpRequest()
        xhr.open('get', url, true)
        if (options.responseType) {
            xhr.responseType = options.responseType
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                callback(xhr)
            }
        }
        xhr.send()
    }
</script>

解决方案2：修改 xhrFields

修改 jq 的 ajax 方法中 xhrFields 属性，定义响应类型为 blob

xhrFields: {
	responseType: 'blob'
},

    function download(){
        var url ="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=20550366,3650143321&fm=26&gp=0.jpg";
        var f1 = $.ajax({
            url: url,
            type: 'GET',
            xhrFields: {
				responseType: 'blob'
			},
        });
        $.when(f1).then(function (content) {
            console.log("jinru")
            var filename = 'xxx.' + url.replace(/(.*\.)/, '') // 自定义文件名+后缀
            var a = document.createElement('a')
            var blob = new Blob([content])
            var url = window.URL.createObjectURL(blob)
            a.href = url
            a.download = filename
            a.click()
            window.URL.revokeObjectURL(url)
        }, function () {
            //失败回调，任意一个请求失败时返回
            console.log("失败");
            console.log('error');
        })
    }