<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[Heck's  Blog]]></title> 
<link>https://www.heckjj.com/index.php</link> 
<description><![CDATA[一瞬间的决定，往往可以改变很多，事实上，让自己成功的往往不是知识，是精神！ 如果你总是为自己找借口，那只好让成功推迟。执行力，今天！]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[Heck's  Blog]]></copyright>
<item>
<link>https://www.heckjj.com/post//</link>
<title><![CDATA[通过原生js处理后台返回的文件流]]></title> 
<author>Heck &lt;@hecks.tk&gt;</author>
<category><![CDATA[Web开发]]></category>
<pubDate>Wed, 29 Dec 2021 08:25:34 +0000</pubDate> 
<guid>https://www.heckjj.com/post//</guid> 
<description>
<![CDATA[ 
	最近在做项目时有一个这样需求，上传文件需要显示预览，当我了解之后，我以为和普通的下载一样呢，结果后台返回的是文件流格式，据说这是因为后台是分布式部署，不能持久化存储，没办法，只能前端来处理这个文件流了，用ajax请求图片资源，服务器以文件流的形式返回。<br/><br/>1、返回类型需要设置为“blob”，所以需要用原生ajax，不能使用jq（原因：jquery将返回的数据转换为了string，不支持blob类型）（当然，你也可以引入组件拓展jq的能力，我知道的有一个：jquery-ajax-blob-arraybuffer.js）；<br/><br/>2、使用FileReader将文件流转换成base64格式；<br/><br/>3.1、然后通过模拟点击a标签下载该文件；<br/><br/>3.2、或者可以设置在img元素的src属性上，在当前页面显示出来。<br/><br/> var xhr = new XMLHttpRequest();<br/>&nbsp;&nbsp;xhr.open(&#039;GET&#039;, url, true);&nbsp;&nbsp;&nbsp;&nbsp;// 也可以使用POST方式，根据接口<br/>&nbsp;&nbsp;xhr.responseType = &quot;blob&quot;;&nbsp;&nbsp;// 返回类型blob<br/>&nbsp;&nbsp;// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑<br/>&nbsp;&nbsp;xhr.onload = function () &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;// 请求完成<br/>&nbsp;&nbsp;&nbsp;&nbsp;if (this.status === 200) &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 返回200<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var blob = this.response;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var reader = new FileReader();<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(blob);&nbsp;&nbsp;// 转换为base64，可以直接放入a表情href<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.onload = function (e) &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 转换完成，创建一个a标签用于下载<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var a = document.createElement(&#039;a&#039;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.download = &#039;data.xlsx&#039;;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.href = e.target.result;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;body&quot;).append(a);&nbsp;&nbsp;// 修复firefox中无法触发click<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.click();<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(a).remove();<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#125;<br/>&nbsp;&nbsp;&#125;;<br/>&nbsp;&nbsp;// 发送ajax请求<br/>&nbsp;&nbsp;xhr.send()<br/><br/><br/>xhr.open(&#039;POST&#039;, CONTACT_ACTION_FILES_DOWNLOAD, true);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Accept&quot;, &quot;application/json;q=0.5&quot;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xhr.responseType = &quot;blob&quot;;&nbsp;&nbsp;// 返回类型blob<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xhr.onload = function () &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 请求完成<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.status === 200) &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var blob = this.response;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var reader = new FileReader();<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(blob);&nbsp;&nbsp;// 转换为base64，可以直接放入a表情href<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.onload = function () &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#imgTest&quot;).attr(&quot;src&quot;, reader.result);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;;<br/>// 发送ajax请求<br/>xhr.send(&quot;filePath=&quot; + filePath);<br/><br/>下载文件<br/>export const downloadStream = (method = &#039;GET&#039;, url, downloadName) =&gt; &#123;<br/>&nbsp;&nbsp;const ctoken = getCookie(&#039;AIB_TOKEN&#039;)<br/>&nbsp;&nbsp;if (ctoken) &#123;<br/>&nbsp;&nbsp;&nbsp;&nbsp;let xmlResquest = new XMLHttpRequest();<br/>&nbsp;&nbsp;&nbsp;&nbsp;xmlResquest.open(method, url, true);<br/>&nbsp;&nbsp;&nbsp;&nbsp;xmlResquest.setRequestHeader(&quot;Content-type&quot;, &quot;application/json;charset=UTF-8&quot;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;//这里需要在请求头添加该参数，已防止CSRF<br/>&nbsp;&nbsp;&nbsp;&nbsp;xmlResquest.setRequestHeader(&quot;csrfToken&quot;, hashStr(ctoken));<br/>&nbsp;&nbsp;&nbsp;&nbsp;xmlResquest.responseType = &quot;blob&quot;;<br/>&nbsp;&nbsp;&nbsp;&nbsp;xmlResquest.onload = function (oEvent) &#123;<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let content = xmlResquest.response;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let elink = document.createElement(&#039;a&#039;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elink.download = downloadName;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elink.style.display = &#039;none&#039;;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let blob = new Blob([content]);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elink.href = URL.createObjectURL(blob);<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(elink);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elink.click();<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.removeChild(elink);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#125;;<br/>&nbsp;&nbsp;&nbsp;&nbsp;xmlResquest.send();<br/>&nbsp;&nbsp;&#125;<br/><br/>&#125;
]]>
</description>
</item><item>
<link>https://www.heckjj.com/post//#blogcomment</link>
<title><![CDATA[[评论] 通过原生js处理后台返回的文件流]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>https://www.heckjj.com/post//#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>