Angular中embed标签src属性动态绑定失效问题求助

下面是几个常见的问题原因及对应的解决方式：

1. Angular安全策略拦截了动态URL #

Angular默认会对动态绑定的资源URL进行安全校验，未被标记为安全的URL会被浏览器拦截。你需要用DomSanitizer处理你的PDF路径：

第一步，在组件中注入DomSanitizer并处理URL：

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

export class MyComponent {
  embedSource: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {
    const pdfPath = 'pathtofile.pdf';
    this.embedSource = this.sanitizer.bypassSecurityTrustResourceUrl(pdfPath);
  }
}

模板中保持原绑定即可：

<embed [src]="embedSource" type="application/pdf" width="100%" height="600px">

2. PDF文件路径配置错误 #

确认你的文件路径是否符合Angular的静态资源规则：

• 如果PDF放在assets文件夹下，路径应该写成./assets/pathtofile.pdf或者assets/pathtofile.pdf
• 如果是外部URL，确保路径是完整的（比如https://example.com/pathtofile.pdf）
• 检查文件是否确实存在于指定路径下，避免拼写错误或者大小写问题（部分服务器区分文件名大小写）

3. 服务器或文件权限问题 #

• 如果是本地开发，确认Angular CLI的angular.json中已经配置了assets项，确保PDF所在的目录被包含在静态资源里：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/pathtofile.pdf" // 如果PDF不在assets里，需要单独添加
  ]
  

• 如果是生产环境，检查服务器是否允许访问该PDF文件，文件权限是否设置为可读（比如Linux下的chmod 644）

4. Embed标签的兼容性问题 #

部分浏览器对embed标签的PDF支持有限，可以尝试换成iframe标签测试：

<iframe [src]="embedSource" type="application/pdf" width="100%" height="600px" frameborder="0"></iframe>

或者使用object标签：

<object [data]="embedSource" type="application/pdf" width="100%" height="600px">
  <p>无法加载PDF，请<a href="{{embedSource}}">点击下载</a></p>
</object>

内容的提问来源于stack exchange，提问作者Jagz S