title: How to get an attachment from GET request with JavaScript? (REST)
body: <p>I have a web page with a table which generates once from a XMLHttpRequest. The response includes a JSON with some text and associated links to three attachments that may or may not be there, so I have to loop through those to store variables and create links, like so:</p>
  
  <pre><code>function drawWITable(tableObjArr) {
  
              tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries.reverse();
              var tableCount = Object.keys(tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries).length;
              var tableHeader = "&lt;table&gt;&lt;tr&gt;&lt;th class='general'&gt;ФИО&lt;/th&gt;&lt;th class='general'&gt;Примечания&lt;/th&gt;&lt;th class='general'&gt;Дата создания&lt;/th&gt;&lt;th class='general'&gt;Группа&lt;/th&gt;&lt;th class='attch1'&gt; &lt;/th&gt;&lt;th class='attch2'&gt; &lt;/th&gt;&lt;th class='attch3'&gt; &lt;/th&gt;&lt;/tr&gt;";
              var tableContent = "";
              for(i = 0; i &lt; tableCount; i++) {
                  tableContent = tableContent + "&lt;tr class='hoverHL'&gt;&lt;td&gt;" + tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values.FullName + "&lt;/td&gt;&lt;td&gt;" + tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["Detailed Description"] + "&lt;/td&gt;&lt;td&gt;" + moment(Date.parse(tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["Work Log Submit Date"])).format('dd, MMMM DD YYYY, HH:mm:ss') + "&lt;/td&gt;&lt;td&gt;" + tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values.DftSupportGroup + "&lt;/td&gt;";
                  if (tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["z2AF Work Log01"] != null) {
                      wrklgID = tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["Work Log ID"];
                      attachName1 = tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["z2AF Work Log01"].name;
                      tableContent = tableContent + "&lt;td class='attchentry' onClick='getAttachment1(authToken, wrklgID, attachName1);'&gt;" + "1" + "&lt;/td&gt;";
                  }
                  if (tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["z2AF Work Log02"] != null) {
                      wrklgID = tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["Work Log ID"];
                      attachName2 = tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["z2AF Work Log02"].name;
                      tableContent = tableContent + "&lt;td class='attchentry' onClick='getAttachment2(authToken, wrklgID, attachName2);'&gt;" + "1" + "&lt;/td&gt;";
                  }
                  if (tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["z2AF Work Log03"] != null) {
                      wrklgID = tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["Work Log ID"];
                      attachName3 = tableObjArr[event.currentTarget.querySelector(".entry-cell &gt; #cellCount").innerHTML].entries[i].values["z2AF Work Log03"].name;
                      tableContent = tableContent + "&lt;td class='attchentry' onClick='getAttachment3(authToken, wrklgID, attachName3);'&gt;" + "1" + "&lt;/td&gt;";
                  }
                  tableContent = tableContent + "&lt;/tr&gt;";
                  }
              var tableFooter = "&lt;/table&gt;";
  
              document.getElementById("request-worklog").innerHTML = tableHeader + tableContent + tableFooter;
              $("#request-worklog table tbody tr th").resizable({
                  minHeight: 20,
                  maxHeight: 20
              });
  
          }
  </code></pre>
  
  <p>Then, by clicking either of the attachment areas user should be able to download file.</p>
  
  <pre><code>function getAttachment1(authToken, wrklgID, attachName1) {
  var data = "undefined=";
  
  var request = new XMLHttpRequest();
  request.withCredentials = true;
  
  request.open("GET", "http://XXXXXXXXXXXXXXXX/v1/entry/WOI:WorkInfo/" + wrklgID + "/attach/z2AF%20Work%20Log01", true);
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.setRequestHeader("Authorization", authToken);
  request.setRequestHeader("Cache-Control", "max-age=0");
  request.responseType = "blob";
  
  request.send(data);
  
      request.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              var content = request.response;
              console.log(content);
          }
      };
    }
  </code></pre>
  
  <p>Right now after clicking I only get network response in form of </p>
  
  <pre><code>PNG
  
  
  IHDRrWØ¼øsRGB®ÎégAMA±üa pHYsÒÝ~ütIMEÞ,-ËòtEXtSoftwarepaint.net 4.0.9l3~NIDATx^íTÕÙÇMóK5Ý.Ò¤
  R-Ö|ES±1*ÁìF£_H+±¤ÇXbÔ¨`OÑÙÙ]vvg]¶²Íóýÿï9çÎ;gª|qÞçù=sË9ï9÷üï©÷ÞÙI)ÕVfçn
  ©­÷½2;ïmÝu
  *zÀxU±ßF¦|fÈ(ÍÐÑa¢ÃÒì?F3b¬fä8Í£Æ&amp;hFOb¬9ÈaÌ!±jÆf¤¸fBøÄÉ1-dWMdÄ{Ñe¶kÜÑ1æ
  9Ö°Ìö±íTÈû«HóýcÌ#d¨]ÂN&lt;as÷ á     ûTðÑoôæ+çÄý0cÌ£/9ÉB&gt;FU`TV[^aì¨o°&amp;2èÂÄ4a"£ÄêÙsUÃ57ªæ_=¬Züj}êiµyÍÃªþêTÕ×NTlãäDö¢"}§0¼èqÒ|ô~qß=_%äÇbÌ#$â­ù«j{þÅ?&gt;&amp;­àbOÑq{&gt; qå*ã!j¿Á#e(ßpÃ-ª3Wïõô¸ó£ëª¬DØâ¦Ñ7W&gt;1#ý©Mw.üµ&gt;ýÅPß6Õ_?IÊ¡õñ§À*qÆ|=mÁ9¶u¯R-xLµ&lt;ö¸æO?kW`áOñÃ¦g¤W(Æ!Yyµª·½]ÎZë®Ià\ö2CõvtÐÚÚÖ½¬çcYâ¨]uªM ]vñ|Ö¬W3ÏÍ+&amp;k
  o,Þ L´&lt;ön=rÄsì1@uUWk½½ò\¼TûàyÔ¨¦Õ÷©Þ-[tÒÝ®®ª#5]?ý\Û6BJá­6ßû .¤5ÐD*ÁV®ÎèGÓÒr´F1+'NõÏ"5.[.ïZrÉ5éBÞ{FB­êÈã¶Òò$¢ÌÞ´Æ§ÌTïánt­míKÞ»^Dì;Lµüù´Â}?ÖüÐ£(4sü{AjkÝUEÿüM3Ç
  ½m\ÎL7©AÓ
  !ï{ äë©N·@}ÀBRDô'õHÖæMÓôHSÄ&amp;-Gó»éÖÛuÁòMHúJ.½Á'HúÔp\Z!B¦]C6pmlZCi1WÈõI
  BFær*ìì4¡µi!CíÄ¼óå2ÌØS¿I5þr¥ªùÆéªrÖñàkØþ®jZuêÝÜì-Tk³¾/MHZOs3FÊèR¦Ç×êãNÚw"dâÔ³T|Æ±*¡äW8N3óx
  ®Oº púbìRâ¢_ì®KfÔBÄoZ}¿´iÓ¢ #Ç©æGÁß±Ð+8÷tâæén¾Dý-ÿyÇ+"­!«Ød2û¿\¸é1GH®ðó$"BþÄ;^!fMjÃÍ?òzQC]ù^úÜÌ»koÊ*fÝ%KtáØt)$¦PÙjr/
  OÂéÔ-\ìo9%/¿:]Èû1p  YyÄ1~·6Æ etc...
  </code></pre>
  
  <p>As well as this in the console:</p>
  
  <pre><code>Blob {size: 6698, type: "application/octet-stream"}
  size: 6698
  type: "application/octet-stream"
  __proto__: Blob
  </code></pre>
  
  <p>What should I do next? How to initiate the download process? I am able to get a name of an attachment from the other side, but that's it, no type or anything. Official documentation isn't much of a help either. I am fairly new to JS, so maybe it's something simple that I'm missing? </p>
  
  <p>Thank you!</p>