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

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

《1》axios指定responseTypeblob类型接收响应:

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

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

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

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

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

你可能感兴趣的:(pdf)