一、展示圖片
1.img標簽指向圖片地址
<img border="0" src="www.xx.com/aa/bb.png" alt="picture" width="160" height="100">
拓展:如果是一個img標簽,通過切換src來展示不同的圖片時,會發現瀏覽器有緩存,會重復使用第一次加載的圖片。這時候可以在圖片地址后加上 '?<%='+Math.random()+'%>'來保證每次都更新圖片。或者說,給img標簽加個:key="imgSrc"(待驗證);
2.img標簽指向base64流
<img src="data:image/png;base64,一長串base64字符串"> //前綴data:image/圖片類型;base64,是必填的。
關於base64圖片流,有幾點說明:
base64加密,大小增長1/3左右。
base64流顯示圖片,能夠減少一個圖片的 HTTP 請求,適合小圖片。
base64流顯示圖片,大圖片渲染解析得比較慢,不適合大圖片。
base64流顯示圖片,IE 8 以下不支持 data url,IE 8 開始支持 data url,卻有大小限制,32k(未測試)。
3.二進制圖片展示
①設置responseType = 'blob'
②利用URL.createObjectURL
來生成DOMString,然后將這個dom元素append到要放的div下面
二、下載文件
1.url下載,直接獲取下載文件的地址,然后
window.location.href = url;
2.二進制流文件下載
let data = resp.data; let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'excel.xlsx') document.body.appendChild(link) link.click() document.body.removeChild(link)
拓展:如果二進制流這樣還下載不了,可能是responseType的問題,把responseType改為'blob'或者 'arraybuffer'試試