前端展示图片和下载文件的几种形式

一、展示图片

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改为 'arraybuffer'试试

上一篇:Markdown基础(it的必会好嘛)


下一篇:springboot 集成J2Cache