javascript - AJAX response need to be converted to blob - Stack Overflow

admin管理员组

文章数量:1325150

I have written ajax code to set request headers in url and convert that to a blob and pass to a function showFile (blob); The blob is then processed and downloaded in pdf format The blob value obtained in the code is ing as undefined. Can someone please help me to resolve the issue`

   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); 
        });
    };

I have written ajax code to set request headers in url and convert that to a blob and pass to a function showFile (blob); The blob is then processed and downloaded in pdf format The blob value obtained in the code is ing as undefined. Can someone please help me to resolve the issue`

   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); 
        });
    };

• javascript
• jquery
• ajax
• blob

Share Improve this question Follow edited May 5, 2018 at 16:53 Musa 97.7k1717 gold badges122122 silver badges143143 bronze badges asked May 5, 2018 at 11:09 anonymousanonymous 10111 gold badge44 silver badges1111 bronze badges 2

• What version of jQuery are you using? – Musa Commented May 5, 2018 at 17:26
• JQuery 3.1.1 version – anonymous Commented May 5, 2018 at 18:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

If you need a blob response from jQuery ajax, set the responseType field of xhrFields to blob. Since the response will be a blob you don't have to create one.
Also, did you forget to add your auth header to the request?

   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); 
        });
    };

本文标签： javascriptAJAX response need to be converted to blobStack Overflow