Question

我正在以blob显示图像

const file = new Blob([response.data], { type: 'image/png' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
        console.log('fileURL', fileURL);
        const image = document.createElement('img');

我收到了这个回复

PNG


IHDR2²OósRGB®ÎégAMA±üa  pHYsÃÃÇo¨dã¼IDATx^ìý=ô<Ó¶Þ;ÐØ²g
cõ-EVÙÚÜòfã·#cV0¡\¡5È·Eüü$
]EGâ¹AD"    èî÷½þûeü÷_ý×ð\¸³µ°ñ F\¸³µ°ñ    F\¸³µ°ñ    F\¸³µ°ñ    FáË¥ßçòüù«&Þv~ÑTU?ÿ^Ý}öòóÜï×'sµùÔ¤|¼þåúE8ñp
ÎÛ3Î0
¹Þuv]áÌäZ×G#¬Ïv\f.ý{ý>ã¦ñï÷õÈõÁÛÅØã·n6«ÿÞpÙ.2ßÆ¹od
ÕEk+bv|_Hß5yÏçnØ1C´ìOÑÞøVÛ|¯
¤=ûsÔ_}BKíWÊó÷¿ç¯×ò_Þòu¸ÈÜ\dF¾a
¯FXí¸.Í\"øãñXÈ|8°àmÇýØa)@
F;L æ Øñæá_ðÉ¾´o»ìÔq#ºMxVÍ_±S.|íËs¿4×â7÷="/2GýÝù¹uyZ{c6Â×·°ãÛÆyqÎ_\ÁFøÎ)¼>a}¶àº¸r)Ý
ÄÛ® ÖáÌÁÁ\à"ó'â7|ú®HNë'/Õû
D ¶³c.!lÿÈ¶Ëhê¾ü"sÆß4ò@^¦¬XxcvÒ×·Ì½ÀEf$.í7a}¶àº4s)úáñtøÖEÛ´´ve¬í`Ê"UWäÃÛèÁ¿X}½2få¯âH²×n£Îy)U|Íg]O½{þ«}Ï®¹JÈ-ýðkÙÊ¯óR¸/ZLBd[NN±¨ùÖÌ¥x}³è:#"9¯yoLÃ·ÿBÎj¸Õvöú_æ´v8çï.òú©Cµ-/óÊõÑ   _{¹³æb[.êòRÙÖ£'lµo¦¬aò/ÌÕ1>ÿ¶ª<hPù½nüä7Ûzéú]Ïúgó=ó´ÞÛúºÓ¾KéåSÀÅ [¥8ìµÛ¸üí®õFxOáõÑë³×¥KËG1ýÿF&Êw\c´Û6¶Éðqò&¹mYÐÜ@ÝÄØtÓYÇÈ>Ó'´«6"áW±5k>\¥ñ[ëñîùkö[1X}Íãq{1K_1oÓç÷1ãÕ8t*Þå+V±]/G´v5ZI¨ÚÉ¹¼Æ5
µç°½Ö¿cþîÄÊLò#¬1CÆ³¾zrgô·mbÄjïøÛX9N½oû½â²ÖhÏZßlë]ßo=Ku³MâáôÙ;V¼W·õN}¹¾ýíÛH¨>4ðÆ`>çyÐ9x¾¿¢_;GC[
¯FXí¸.¾\J;Ýu¼í2ñÃccçp^iL|CJ~\vvobú<ª
Ê··á¾Þ9k¸ðÞùöwÆ ö£ôUcgû"þÏZ5Ú7xoìq*ò¡Zå@UÛySÞkc+{gsÛw¥Me;û²ÆS×_Ò&wzßwÉýçSoçÙÂ_#2Vïÿ¶3F¬FÏoýVì÷{¾YûÇï4WÍnÀ²]û·wãÖ;ÙëÅÂ>¯´g6®qÕüìåD·ñøëYë°®^°>Ûp]þ4´õáUíøH}{cø63}ccªXòâÙØ%yCZÛx6±óÉã/ýºkyïü
ûyncÖTYü¯b`Ì)|ÜrY÷9ÁÛªßA7úÖGSÃÂ¿]sßrSôÉöëÒË
¥Ms.Ù'ÕfÏ_ï¼
´<`Äï-¯+f#|ÈÜÑsqä·1bõÖñßddÐ7k¿óø½å¨Gíêùéy7·wÜ¾5¦k\#.¢ÂSx}4ÂúlÀuùÓ\ÒHãÀí\Yîæªí£§ÞÄV±AiÞóñHÜÏgyBØR:ñîù«ö¶¦r®úFÞ³Ø«¦®=+°\Ö}Î0_µ4y§o
ÝXi(ßv}ïGDrkåËË%_íò}æÿnÙ<ìoÖväÉ    _ÿâÛV1â°g|1\Ìñ{ë³cmZß¬ùÎí·½ß[¶Óóìßéy_onÏe!å%ïçÏq×¸Æ<´ý¾÷týu¯õFxNáõÑë³×åOsI; ["ÅhçÛÈä¸qDüL´¡o¸cçCIïÚ¶ß;Ã~sMùsßÅÿ*¿9½»@Ç;°voõâFãÛ®|<(ùÁî³ãð=Úa±mÎå'Ù¬:HùÛAËN«×C¾úrgì·ÝÀÃ¹ñ;hùNi¼ßóÍÚïöûlm},ÛÕóÓóðÆ[>çö|öKnÒ²/¿]ãqù
ìPx}4ÂúlÀuùÓ\j~àv»6²î :Ã61µ
ÛÄbÞ&;v>5}ÛoxrfMc1cvµ9;õáº·bZÞ/ëú: ßìÛ7VªøUúÉyNtN;iîÖþbÌÍ°|ÿÿÕ
®õ·V¯G|uæÎÐo»Sãwáv8¶Ý=ß¬ýîßud¯}n³úwvÇ×ÛsÙ¹pîÛs«~,&ïÄå¯½\ëñúhõÙëò§¹¤Æ#Ñ  ßF¹7Åº{h×ßàmb_IðÐ6ä+ï£æì±yPÞ=ï¦v$ÙðlóÃ7¦Ö. ÆX°q)Ù¾×ñóàöm/v+ñ=ó5çz[=;+ùÀg1Ù+6,Û$¿Ö
÷·6^ùêË=e_7ê·Ý¢õ=÷Ç/kXwíÚq~/8µ÷ö3ým½ëúÞÓo9ÇûW¿bóÜ<¯7·çµ¿æ"+Ô×®qY,qì5æ
ßÈº¸üÝ£¡-×G#¬Ïv\?Í¥øá±¬uðròKþè½Yl©´¥Â¸Mlû°ø¨mtÜNSÝùlvøØ÷Îß°ãÂ×´ö=ôIµòÃ1fDÉ¯}³îsMséÏÓ²Kö_í7È·o¬8Ú·(öóÂß&õÖïV¬ñ,´q95l¯¾üþÖmJm-ZyPèæ#fG}uä'¾ítÙ=ãù8óMä·+â+íê~&Zï"¿¹4«mfC]÷Ãó8¾ÞÜÏ~ªó¼I}÷¬igÜ3>Ø?»ßÉwähxOáõÑë³×¹ôÙèóBÞ°Ô|é"£¬-|æùóÅ|Ûú.gk?aâ¹ôáärÕUù3àïÅø©/|W¼È|Ýú&gk?a}¶àº ¾ñ+û¥X¾$|ÆÁ%/2o;Sßào°AáõÑë³×¹pfk?aâ¹pfk?aâ¹pfk?aâ¹pfk?aâ¹pfk?aâ¹pfk?aâ¹pfk?aâ¹pfk?aâ¢K?Ïð/á_ÿff¬á=þÑ´4?Ïsÿøz}Ä2ßç?þU{ß7?¾!×¿ÏÈð´´ß;Ög;®K+ :¾¯¿Èhÿ¢ñZÈ¿Û±)ßèût9ýÿXc\dt¼>bO
.2À.2`#^°>Ûp]¾*þ½~>!zAþzþÆøóÅÇ¿ß×   bó"S?K¾:sg¬ÎýcâÛà|¼)Ny>xóããóè¯÷àSà"6fk?aý«Ä'øh¾*¾úÀ_ÏÿSDlþMKåó"³x.A×ò_
±:÷OooðñVà"3¿ÞOØýõ¯à£iå<TÒFÚÄÒÙÍcÿ(ë~j·|@¬¶Y»ô§¬tÄ¨5>ßÈ×vÄÊGî·NOÌ?À×p×ZãocXgÇjò¼û"Sæb%m®%gÔxr[æ8+¾G×?0ÂG¯º}oOYñÎ´+¦[ï"Ü6¿ÐµÁÉïµHÝ1#Û)~Br{,>imø÷×9Ã×qoÝbkWç*¾ÎqÏÚü×÷¹6ñ×wlîjxæîÍpKB^Px}4ÂúlÀuiåR}øäd]5lÞê&IýÃ&Ê4Mp²
V{7ïÖm|2bWósE´çÖÔK·¿>¾§ó$;ÆÒ0ÆwÛtÄ¢G¯Ñ¶6oÇÔ~Js®|Äÿ3s_·->¦g¥Möëí)ó,´ÞIÛÊ³¦

当我得到一些stackoverflow答案时，我明白我的回答是错误的。我的问题是如何获得正确的二元响应..

Answer 1

您可以使用XMLHttpRequest()或fetch()获取回复Blob

let url, w;
let request = fetch("/path/to/image");

request.then(function(response) {
  return response.blob() // return `Promise` which resolves to `Blob` of response
})
.then(function(blob) {
  url = URL.createObjectURL(blob);
  w = window.open(url);
})
.catch(function(err) {
  console.log(err)
});

let url, w;

let request = new XMLHttpRequest();
request.open("GET", "/path/to/image");
request.responseType = "blob"; // set `responseType` to `"blob"`
request.onload = function() {
  url = URL.createObjectURL(blob);
  w = window.open(url);
}
request.onerror = function(e) {
  console.log(e);
}
request.send(null);

Answer 2

$http.get(ur1, {
                responseType: 'blob'
            }).then(function (res) {

                this.download(res)

}, function (err) {

               conseole.log(err)

            })

    }
};
    this.download = function (data) {
        var type  =  data.headers('Content-Type'),
            content = data.data,
            fileName  =  data.headers('x-ms-meta-originalname'),//Get the file name
            blob  = new Blob([content], {type: type}),
            url = window.URL.createObjectURL(blob);

        var a = document.createElement('a');
        a.href = url;
        a.target="_self";
        a.download = fileName;
        a.click();
        a = undefined;


    }

此处的附加详细信息：http://angularjstricks.blogspot.in/2017/03/download-file-from-server-with-http-in.html

图像Blob - 弹出窗口不显示内容

2 个答案: