首页 > 解决方案 > AJAX 响应需要转换为 blob

问题描述

我已经编写了ajax代码来设置请​​求标头url并将其转换为blob并传递给函数showFile (blob);然后blob以pdf格式处理和下载blob代码中获得的值是undefined. 有人可以帮我解决这个问题`

   var resolved = function (url) {
        var showFile = function (blob) {
            var newBlob = new Blob([blob], {type:"application/pdf"})                   
            const data = window.URL.createObjectURL(newBlob);
            var link = document.createElement('a');
            link.href = data;
            link.download = options.name;
            link.click();
            setTimeout(function () {
                window.URL.revokeObjectURL(data);
            }, 100)
        }
        var jwtToken = localStorage.getItem("jwtToken");
        var headerObj = {"Authorization": "Bearer " + jwtToken}

        var xhr = new XMLHttpRequest();
        $.ajax({
            dataType:'blob',
            type:'GET',
            url:url
        }).done(function(blob){
            showFile(blob); 
        });
    };

标签: javascriptjqueryajaxblob

解决方案


如果您需要来自 jQuery ajax 的 blob 响应,请将responseType字段设置xhrFieldsblob. 由于响应将是一个 blob,因此您不必创建一个。
另外,您是否忘记将您的身份验证标头添加到请求中?

   var resolved = function (url) {
        var showFile = function (blob) {                 
            const data = window.URL.createObjectURL(blob);
            var link = document.createElement('a');
            link.href = data;
            link.download = options.name;
            link.click();
            setTimeout(function () {
                window.URL.revokeObjectURL(data);
            }, 100)
        }
        var jwtToken = localStorage.getItem("jwtToken");
        var headerObj = {"Authorization": "Bearer " + jwtToken}

        var xhr = new XMLHttpRequest();
        $.ajax({
            xhrFields: {
               responseType: 'blob' 
            }
            headers: headerObj, 
            type:'GET',
            url:url
        }).done(function(blob){
            showFile(blob); 
        });
    };

推荐阅读