默认 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');
        })
    }
    
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐