原生js实现预览图片或PDF...

服务返回二进制流用axios处理指定blob类型然后再转换成URL 处理后会变成blob://... 这种格式)图片的话作为src地址可以直接实现预览PDF需要服务端的响应头Content-Type 为PDF类型application/pdf不指定这种类型会直接下载不能预览;

《1》axios指定responseType为blob类型接收响应

axios.get('url',{ params:{ key:this.key }, responseType: 'blob'})

《2》用createObjectURL()方法转为URL

.then(res => { this.imgUrl = window.URL.createObjectURL(res.data)})

《3》图片可以直接使用这个URL实现预览

<img :src="imgUrl " />

《4》PDF使用window.open()新打开页面实现预览

window.opean(this.imgUrl )

注意: 请求 blob 格式数据返回并且后端 response 体中Content-Type 需要配置为 application/pdf否则下一步中生成的 blob 链接访问时会直接触发下载。

具体原因:

默认情况下许多web服务器会为那些未知内容类型的文件配置一个默认MIME类型text/plain 或者application/octet-stream 。

当一种新的内容类型被创造或者被添加到web服务器上web管理者在添加它到web服务器配置中可能会失败。主要原因是用户使用Gecko-based 的浏览器而这种浏览器只相信由web服务器和web应用所发布的MIME类型
MIME类型描述了邮件或者web服务器或者web应用中的媒体内容的类型其目的是为了指导web浏览器对媒体内容的处理和表现
具体的MIME类型
text/html 对于一般网页
text/plain 对于一般文本
text/css 对于级联样式表
text/javascript 对于脚本
application/octet-stream 意味着“下载这个文件”
application/x-java-applet 对于 Java applets
application/pdf 对于 PDF 文档

更详细请查看 MIME types

更多实现方式
浏览器自带 PDF 预览功能
将图片流显示在页面中