浏览器访问阿里云PDF文件不是直接打开的问题

浏览器访问阿里云地址的PDF文件，变成了下载而不是直接打开的问题。

场景：在后台管理项目中的pdf上传功能，上传到阿里云，得到一个阿里云的url地址，前端利用iframe标签预览。此时发现并没有预览成功，浏览器直接去下载pdf文件了。即使把该地址直接在地址栏访问也会变成下载。此时可以发现并不是前端代码或是浏览器的问题。因该是阿里云配置的原因。

下面提供前端的解决思路：

由于直接访问阿里云地址会下载文件，那么我们可以先把文件以流的形式下载到本地后，再转成blob格式赋值给iframe进行预览。
提示：如果下面代码下载文件流时遇到跨域问题，这时需要配置一下阿里云允许跨域访问。

const reqUrl = "阿里云地址"
const x = new window.XMLHttpRequest()
x.open('GET', reqUrl, true)
x.responseType = 'blob' //返回格式为blob
x.onload = () => {
  const url = window.URL.createObjectURL(x.response) //将后端返回的blob文件读取出url
  console.log('blob====',x.response)   //Blob
  console.log('url====',url)   //blob:http://localhost:XXXXXX
}
x.send()

完整代码

抽离pdf预览组件

<template>
  <div class="PdfPreview">
    <el-dialog  :title="title" :visible.sync="open" width="80%"  append-to-body :close-on-click-modal="false">
      <iframe style="width:100%;height:100%;display:block;border:0;"  ref="mainiframe" :src="url"  ></iframe>
    </el-dialog>
  </div>
</template>
<script>
export default{
  data(){
    return{
      title:"",
      open:false,
      url:"",
    }
  },
  methods:{
    show(url){
      const reqUrl = url
      const x = new window.XMLHttpRequest()
      x.open('GET', reqUrl, true)
      x.responseType = 'blob' //返回格式为blob
      x.onload = () => {
        this.url = window.URL.createObjectURL(x.response) //将后端返回的blob文件读取出url
      
        console.log('blob====',x.response)   //Blob
        console.log('url====',this.url)   //blob:http://localhost:7197/cb047277-e5e6-4905-bf8c-dbecd86a0105

          // url可以预览和下载------如果想要下载就把下方注释打开即可
          // const a = document.createElement('a')
          // a.href = this.url
          // a.download = fileName
          // a.click()
      }
      x.send()
      this.open = true
    }
  }
}
</script>
<style lang="scss" scoped>
.PdfPreview{
  .iframe{
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }
}
::v-deep .el-dialog__body{
  height: 80vh;
}
</style>