原生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 预览功能
将图片流显示在页面中