使用iframe预览pdf，浏览器直接下载

Question

项目中需要用到预览pdf这个功能，在网上搜了下用iframe实现，但理想很丰满，现实很骨感，我把iframe放在弹窗里，弹窗一打开，浏览器自动下载下来了，附上代码：

<template>
  <el-dialog :visible="open" fullscreen  :before-close="handleClose" >
    <!--图片-->
    <div v-if="type === 'image'">
      <img :src="url" />
    </div>
    <!--doc，excel-->
    <div v-else-if="type === 'doc'">
      <iframe
        class="child"
        frameborder="0"
        :src="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url)"
        :style="iframeStyle"
      >
      </iframe>
    </div>
    <div v-else-if="type === 'pdf'">
      <iframe id="pdfPreview" frameborder="0" :src="url" width="100%" height="100%" > </iframe>
    </div>
  </el-dialog>
</template>

父组件：

<Preview :open.sync="openView" url="https:xxxxxx/img/1607578849045.pdf" type="pdf"></Preview>

有大佬遇到这个问题吗？

Answer 1

你的这个 PDF 加载链接需要在响应标头中显式地返回：

Content-Type: application/pdf

并且不能存在 Content-Disposition 标头。

否则浏览器就会当作普通文件去下载。