ANGULAR2/ANGULAR4 How to request the download of the binary Excel file via the $http post method

Time is limited, nonsense will not say more, directly on dry!

Let me introduce you to a hole I met, if you also met, then congratulate you, you will find the answer: ANGULAR2/ANGULAR4 how to request to download the binary Excel file via the $http post method? (Angular1 self-Baidu)

Problem Description:

Back in the background is a binary Excel stream, with the request header as follows:

access-control-allow-origin:*Cache-control:privateContent-disposition:attachment; filename=%e9%a9%be%e9%a9%b6%e5%91%98%e8%af%84%e5%88%86. xlsxcontent-type:application/vnd.ms-excel; Charset=utf-803:19:11 gmtserver:microsoft-iis/8.5Transfer-Encoding: Chunkedx-aspnet-version:4.0.30319X-powered-by:asp.net

The requested method is post, and then with a bunch of parameters, how do I request it now?

At that time, the background should be returned is an Excel file download address, so according to the normal request to initiate the request, the result is the egg, error, the return data is as follows:

The returned result is a binary stream, and there is a hint that the request failed

Troubleshooting backend issues, how should the front end request?

The first way to think of it was to modify the response header:

Content-type:application/vnd.ms-excel; Charset=utf-8

The original response header is Content-type:application/json,改成xsl对应的二进制响应头应该就没错了吧,结果依然是然并卵,直接给我报500错误

于是乎,决定谷歌之,百度之,发现处理这种办法的大多数是这样的:

$http ({URL:' Your/webservice ', Method:"POST", Data:json,//This is your JSON data stringheaders: {' Content-type ': ' Application/json '}, Responsetype:' Arraybuffer '}). Success (function(data, status, headers, config) {varBlob =NewBlob ([data], {type: "Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); varObjecturl =Url.createobjecturl (BLOB); window.open (Objecturl);}). Error (function(data, status, headers, config) {//Upload failed});

Basically, most of the methods are similar to the above, so we tried this method, the key configuration is responsetype: ' Arraybuffer ', because angular's HTTP module has a definition for responsetype:

null;

Find Responsecontenttype:

Export declare enum responsecontenttype {    = 0,    = 1,    = 2,    = 3,} 

Originally it also has these several parameters, that Arraybuffer correspondence is responsetype:2, still is useless, result with directly with POST request same

If you've been through this, look down!

This is I think, responsecontenttype inside of the other properties are what, the front 2 is very good understanding, one is the text format, one is the JSON format, that Arraybuffer and blob is what mean? I'm just going to take it easy, I want to understand, Can see Zhang Xin Xu's understanding domstring, Document, FormData, Blob, File, arraybuffer data types

Arraybuffer represents the raw buffer for binary data, which is used to store data for various typed arrays, and Arraybuffer is a fixed-length container common to binary data.

BLOBs represent binary large objects that specialize in binary data.

Well, you don't understand? It can be understood that Arraybuffer is written as a data source in memory, is pre-nailed dead in an area, the length is fixed, perpetual, blob is a higher level of the large classification, including Arraybuffer, and more;

There is also an understanding that the second version of XMLHttpRequest allows the server to return binary data, which is divided into two cases. If you explicitly know the binary data type returned, you can set the return type (Responsetype) to Arraybuffer and, if you do not, set it to BLOB.

Anyway, whatever it is, try the blob, so there's my final code:

Download (url?:string, form?): Any) {     This. Downloadheader (); return  This. Http.post (URL, form, This. Options). map (res = Res.json ()).Catch( This. HandleError); } downloadheader () {if(Localstorage.getitem (Environment.local_storage_account)) { This. headers =NewHeaders ({' token '): Json.parse (Localstorage.getitem (Environment.local_storage_account)).      Token});  This. options =NewRequestoptions ({headers: This. Headers, Responsetype:3 }); }  }

Everyone's code is not the same, please ignore the other, only focus on Responsetype:3

The last response returned are:

Blob {size:4384, type: "Application/vnd.ms-excel"}

Then you can use the common Blob method to download:

var New Blob ([data], {type: "Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); var objecturl = url.createobjecturl (BLOB); window.open (Objecturl);

Here is a problem, is that many browsers may be wall out of the pop-up window, so that your files can not be downloaded normally, so we use a-label form to download, the idea is to create a new band of a tag, and then passively trigger click:

var New Blob ([res], {type: "Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});   var objecturl = url.createobjecturl (BLOB);   var a = document.createelement (' A ');d ocument.body.appendChild (a); A.setattribute (' style ', ' Display:none '); A.setattribute (' href ', objecturl); A.setattribute (' Download ', FileName

After the end of the release URL, OK, probably the idea is this, if you have what do not understand, welcome to my message, I will reply to you as soon as possible!

Original is not easy, if you need to reprint, please indicate the source, thank you!

ANGULAR2/ANGULAR4 How to request the download of the binary Excel file via the $http post method