原生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',   //这里是声明期望返回的数据类型，为blob
   })
   复制

2. 用createObjectURL()方法转为URL

   .then(res => {  
      this.imgUrl = window.URL.createObjectURL(res.data);   //这里调用window的URL方法
   })
   复制

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

   <img :src="imgUrl " />
   复制

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

   window.open(this.imgUrl )
   复制

   ps:
   需要注意的是，请求 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 预览功能
将图片流显示在页面中