S3 PDF文件在Angular中预览异常：配置签名URL仍自动下载求助

按以下步骤逐一排查并解决：

1. 确认S3对象的Content-Type元数据 #

浏览器能预览PDF的前提是识别到文件类型为application/pdf。如果S3对象的Content-Type是application/octet-stream或其他非PDF类型，即便设置了inline，浏览器也会直接下载：

• 登录S3控制台找到目标PDF文件，查看属性中的元数据，确认Content-Type值为application/pdf，若不符则修改该元数据。

2. 修正签名URL生成参数 #

生成签名URL时，需同时指定ResponseContentType和ResponseContentDisposition，确保参数传递正确。示例Node.js代码：

const params = {
  Bucket: '你的存储桶名称',
  Key: '文件的存储路径/filename.pdf',
  Expires: 3600, // URL有效期（秒）
  ResponseContentType: 'application/pdf',
  ResponseContentDisposition: 'inline; filename="display-name.pdf"'
};

const signedUrl = s3.getSignedUrl('getObject', params);

注意：若S3对象本身元数据设置了Content-Disposition: attachment，签名URL中的ResponseContentDisposition会覆盖原有设置，但必须明确指定。

3. Angular中使用正确的预览标签 #

不能将URL直接赋值给img标签，需使用iframe、object或embed标签实现PDF预览：

模板代码示例（iframe）： #

<iframe [src]="safePdfUrl" width="100%" height="800px" type="application/pdf"></iframe>

模板代码示例（object，带降级提示）： #

<object [data]="safePdfUrl" type="application/pdf" width="100%" height="800px">
  你的浏览器不支持PDF预览，请<a [href]="safePdfUrl">点击下载</a>。
</object>

组件代码（处理Angular安全校验）： #

Angular会对外部URL做安全拦截，需用DomSanitizer将签名URL转为安全资源：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-pdf-preview',
  templateUrl: './pdf-preview.component.html'
})
export class PdfPreviewComponent implements OnInit {
  safePdfUrl!: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 假设从后端接口获取到原始签名URL
    const rawSignedUrl = '后端返回的签名URL';
    this.safePdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawSignedUrl);
  }
}

4. 检查浏览器PDF设置 #

部分浏览器默认设置为自动下载PDF而非预览，可调整浏览器设置：比如Chrome中进入「设置→隐私和安全→站点设置→附加内容→PDF文档」，勾选「在Chrome中打开PDF」选项。

内容的提问来源于stack exchange，提问作者gali lohith