vue使用iframe预览pdf为空提示下载

在Vue.js中，使用`<iframe>`预览PDF文件时，如果预览显示为空白并提示下载，通常有以下几个原因：

1. **跨域问题**：如果PDF位于不同的域名下，浏览器出于安全考虑可能会阻止直接展示内容，此时需要服务器设置CORS（Cross-Origin Resource Sharing）允许跨域访问。

2. **PDF路径问题**：确保PDF文件URL正确无误，并且对于静态资源路径，可能需要配置Vue项目使其能够正确处理相对或绝对路径。

3. **Content-Type头**：检查服务器返回的响应头是否包含`Content-Type: application/pdf`，这告诉浏览器这是一个PDF文件，而不是其他类型的内容。

4. **浏览器限制**：某些浏览器对动态加载的PDF有特定限制，比如Chrome的内嵌PDF支持，可能需要用户点击“打开”按钮。

5. **iframe大小**：确保iframe的宽高足够大来显示PDF内容，避免因尺寸过小导致无法显示。

解决这个问题的一般步骤是：
- 检查服务器设置
- 使用HTML5的`download`属性，先尝试下载，然后通过JavaScript判断是否已成功下载后再切换到预览模式

修复后的代码示例（假设pdfUrl是PDF文件的链接）：

<template>
  <div>
    <button @click="tryPreview">预览</button>
    <iframe :src="pdfUrl" style="width:100%;height:600px; border:none;"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    }
  },
  methods: {
    tryPreview() {
      // 先尝试下载
      window.open(this.pdfUrl, '_blank');
      
      // 检查下载完成后再预览
      setTimeout(() => {
        if (window.location.href.endsWith('.pdf')) {
          this.$refs.iframe.src = this.pdfUrl;
        }
      }, 1000); // 延迟1秒检查
    }
  }
}
</script>